2022-03-27 TIL

Fact

• 성공과 실패를 결정하는 1%의 네트워크 원리 1~120페이지 읽고 스터디
• 프론트엔트 인터뷰 핸드북 스터디

Feelings

• 성공과 실패를 결정하는 1%의 네트워크 원리 책을 사서 읽었는데 네트워크 엔지니어 수준의 책이라고 했는데 확실히 깊이있게 알려주는 책이였다.
• 프론트 엔드 인터뷰도 거의 다 끝나간다 다음엔 어떤 주제로 스터디를 해볼까..

Findings

오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?

Object인 경우

for-in

const object = { a: 1, b: 2, c: 3 }

for (const property in object) {
  console.log(`${property} : ${object[property]}`)
}

// expected output:
// "a: 1"
// "b: 2"
// "C: 3"

Object.keys()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
}

console.log(Object.keys(object1)) // ["a", "b", "c"]

Object.getOwnPropertyNames()

const object1 = {
  a: 1,
  b: 2,
  c: 3,
}

console.log(Object.getOwnPropertyNames(object1)) // ["a", "b", "c"]

배열인 경우

for 반복

forEach

for-of

const array1 = ['a', 'b', 'c']

for (const element of array1) {
  console.log(element)
}

// a
// b
// c

mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.

여기서 말하는 mutable(변경 가능), immutable(변경 불가능)을 원시타입? 객체 타입을 말하는건가? 라고 생각했습니다.

보통 자바스크립트에서 원시타입은 변경이 불가능한 값입니다.

• Boolean
• null
• undefined
• Number
• String
• Symbol

원시 타입 이외의 모든 값은 객체 타입이며 객체 타입은 변경가능한 값(mutable value)입니다.

원시 타입을 예로들면

var str = 'Hello'
str = 'world'

1번 라인이 실행되면 문자열 Hello가 생성되고, str은 메모리에 문자열 메모리 주소를 가리키고

2번 라인이 실행되면 문자열 world가 생성되고 str은 새로운 메모리에 해당 문자열 주소를 가르킵니다.

즉, 처음 선언한 메모리 주소에 있던 Hello가 변경되는 것이 아니라 각각의 메모리에 world, Hello가 할당됩니다.

객체타입을 알아보겠습니다.

const user = {
  name: 'Lee',
  address: {
    city: 'Seoul',
  },
}

let user2 = user1

user2.name = 'Kim'

console.log(user1.name) // Kim
console.log(user2.name) // Kim

객체는 값을 변경하는게 가능하기 때문에 user1, user2가 모두 같은 객체를 가리킵니다. 그렇기 때문에 user1를 변경하면 user2도 변경됩니다.

불변 데이터 패턴

의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “래퍼런스를 참조한 다른 객체에서 객체를 변경”하기 떄문입니다. 이 문제의 해결 방법은 비용이 조금 들지만 객첼르 불변 객체로 만들어 프로퍼티의 변경을 방지하며 객체의 변경이 필요한 경우에는 참조가 아닌 객체의 방어적 복사를 통해 새로운 객체를 생성한 후 변경합니다.

Object.assign

Object.assign은 타깃 객체로 소스 객체의 프로퍼티를 복사합니다. 이때 소스 객체의 프로퍼티와 동일한 프로퍼티를 가진 타겟 객체의 프로퍼티들은 소스 객체의 프로퍼티로 덮어쓰기됩니다. 리턴값으로 타깃 객체를 반환합니다.

const o4 = { a: 1 }
const o5 = { b: 2 }
const o6 = { c: 3 }

const merge2 = Object.assign({}, o4, o5, o6)

console.log(merge2) // { a: 1, b: 2, c: 3 }
console.log(o4) // { a: 1 }

하지만 Object.assign은 완전한 깊은복사를 지원하지 않습니다. 객체 내부의 객체는 얇은 복사가 됩니다.

const user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul',
  },
}

const user2 = Object.assign({}, user1)

console.log(user1 === user2) //false

user2.name = 'Kim'
console.log(user1.name) // Lee
console.log(user2.name) // Kim

console.log(user1.address === user2.address) // true

user1.address.city = 'Busan'
console.log(user1.address.city) //Busan
console.log(user2.address.city) //Busan

이것 말고도 freeze가 있는데 위에 두개는 가독성도 좋지않고, 번거롭고 성능상에 이슈가 있어서 사용하지 않는게 좋다. 그래서 대안으로는

Facebook이 제공하는 Immutable.js를 사용하는 방법이 있다.

npm install immutable

const { Map } = require("immutable");
const map1 = Map({a:1,b:2,c:3})
const map2 = map1.set("b", 50)
map1.get("b") // 2
map2.get("b") // 50

동기, 비동기 함수의 차이점을 설명하세요.

동기 함수는 블로킹인 반면, 비동기 함수는 그렇지 않습니다. 동기 함수에서는 다음 명령문이 실행되기 전에 앞 명령문이 완료됩니다. 이 경우, 프로그램은 명령문의 순서대로 정확하게 평가되고 명령문 중 하나가 매우 오랜시간이 걸리면 프로그램 실행이 명령문이 끝날때 까지 일시중지 하게됩니다.

하지만 비동기 함수는 함수가 호출된 후 즉시 다음줄 실행이 계속됩니다. 비동기 작업이 완료되고 호출 스태이 비어있을때만 완료된 작업을 호출합니다.

https://it-eldorado.tistory.com/86?category=749286

이벤트 루프란 무엇인가요? 콜스택과 테스크 큐의 차이점은 무엇인가요?

테스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어있고, 테스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제거되고 실행될 콜 스택으로 푸시됩니다.

function foo() {} 와 var foo = function() {} 사이에서 foo 사용의 차이에 대해 설명하세요.

function foo() {}는 함수 선언식이고, var foo = function() {}는 함수 표현식입니다. 차이점은 함수 선언식은 호이스팅이 되지만, 함수 표현식은 함수를 담은 변수만 호이스팅이 되고, 그 함수는 호이스팅이 되지 않습니다.

Future Action

• 새로운 스터디 주제 찾아서 함께 스터디하기!