1. 깊은 복사와 얕은 복사에 대해 설명해주세요.
- 객체가 중첩되어 있을 때, 얕은 복사는 1단계까지 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 모든 객체를 복사하는 것을 말합니다.
- 얕은 복사 방법은 slice, Object.assign, spread 연산자를 사용하는 방법이 있습니다.
- 깊은 복사 방법은 JSON.stringfy와 parse 메서드를 사용하거나 lodash 라이브러리의 cloneDeep 메서드를 사용하는 방법이 있습니다.
2. 프로토타입에 대해 설명해주세요.
- JavaScript의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있는데, 이러한 부모 객체를 프로토타입이라고 합니다. 프로토타입은 객체의 [[prototype]] 내부 속성에서 참조합니다.
2.1 프로토타입은 어떻게 결정되나요?
- 프로토타입은 객체 생성 방식에 따라 결정됩니다. 객체 리터럴에 의해 생성된 객체의 프로토타입은 Object.prototype이고, 생성자 함수에 의해 생성된 객체의 프로토타입은 생성자 함수의 prototype 속성에 바인딩된 객체입니다.
2.1 프로토타입 체인에 대해 설명해주세요.
- 객체의 속성에 접근할 때 해당 객체에 접근하려는 속성이 없으면 [[prototype]] 내부 속성의 참조에 따라 자신의 부모 역할을 하는 프로토타입의 속성을 순차적으로 검색합니다. 이를 프로토타입 체인이라고 합니다.
2.2 객체가 프로토타입 체인 상에 존재한다는 것을 어떻게 확인할 수 있나요?
- instanceof 연산자를 사용하여 객체가 프로토타입 체인 상에 존재한다는 것을 확인할 수 있습니다.
2.3 for...in 문과 for...of 문의 차이점에 대해 설명해주세요.
- for...in 문은 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 속성 중 [[Enumerable]] 값 true인 속성을 순회하며 열거합니다.
- for...of 문은 내부적으로 iterator의 next 메서드를 호출하여 iterable을 순회하면서 next 메서드가 반환한 interable result 객체의 value 속성 값을 for...of 문의 변수에 할당합니다.
3. 동기와 비동기에 대해 설명해주세요.
- 동기는 실행 중인 작업이 종료될 때까지 다음 작업이 대기하는 방식이고, 비동기는 현재 실행 중인 작업이 종료되지 않아도 다음 작업을 바로 실행하는 방식을 말합니다.
3.1 JavaScript에서 비동기 처리를 어떻게 하나요?
- JavaScript는 브라우저와 협력하여 비동기 처리를 합니다. setTimeout 함수를 예를 들면, 자바스크립트 엔진에서 setTimeout 함수를 실행하면 브라우저에서 타이머로 시간을 잽니다. 지정한 시간이 지나면 setTimeout의 콜백 함수를 태스크 큐에 넣어줍니다. 그러면 브라우저의 이벤트 루프가 콜 스택이 비어있을 때까지 기다렸다가 태스크 큐에 대기한 콜백 함수를 호출하여 생성된 실행 컨텍스트를 콜 스택에 넣어줍니다. 이러한 방식으로 비동기 처리를 합니다.
3.2 다음 코드가 어떻게 동작할지 브라우저와 자바스크립트 엔진 관점에서 설명해주세요.
setTimeout(function foo() {
console.log(1);
}, 0);
Promise.resolve()
.then(function bar() {
console.log(2);
}).then(function chu() {
console.log(3);
})
- setTimeout 코드가 실행되면서 브라우저의 타이머가 0초를 샌 후 foo 함수를 태스크 큐에 넣습니다.
- Promise 코드가 실행되면서 마이크로 태스크 큐에 bar 함수와 chu 함수를 차례대로 넣습니다.
- 이벤트 루프가 콜 스택이 비어있는 것을 확인하고, 마이크로 태스크 큐에서 bar 함수를 호출합니다. bar 함수의 실행 컨텍스트가 콜 스택에 담기고 실행됩니다.
- 이벤트 루프가 콜 스택이 비어있는 것을 확인하고, 마이크로 태스크 큐에서 chu 함수를 호출합니다. chu 함수의 실행 컨텍스트가 콜 스택에 담기고 실행됩니다.
- 이벤트 루프가 콜 스택이 비어있는 것을 확인하고, 마이크로 태스크 큐도 비어 있는 것을 확인합니다. 그리고 태스크 큐를 확인하여 대기중인 foo 함수를 호출합니다. foo 함수의 실행 컨텍스트가 콜 스택에 담기고 실행됩니다.
참고
- 모던 자바스크립트 Deep Dive Chap.11 원시 값과 객체의 비교
- 모던 자바스크립트 Deep Dive Chap.19 프로토타입
