1. JavaScript에서 일어나는 데이터 형변환에 대해 설명해주세요.
- JavaScript에서 일어나는 형변환에는 명시적 형변환과 암시적 형변환이 있습니다.
- 명시적 형변환은 개발자가 의도적으로 값의 타입을 변환하는 것을 말하고, 암묵적 형변환은 개발자의 의도와는 상관 없이 표현식을 평가하는 도중에 JavaScript 엔진에 의해 암묵적으로 값이 타입이 변환하는 것을 말합니다.
1.1 암묵적 형변환에 대해 자세히 설명해주세요.
- JavaScript 엔진은 표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 형 변환을 실행합니다.
- JavaScript 엔진은 문자열 연결 연산 표현식을 평가하기 위해 문자열 연결 연산의 피연산자 중 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 형변환합니다.
- JavaScript 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 산술 연산자의 피연산자 중 숫자 타입이 아닌 피연산자를 숫자 타임으로 암묵적 형변환합니다.
- JavaScript 엔진은 if문이나 for문과 같은 제어문, 조건문에서 Truthy 값을 true로, Falsy 값을 false로 암묵적 형변환합니다.
1.2 명시적 형변환 방법에 대해 자세히 설명해주세요.
- 명시적 형변환 방법으로는 표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법, 빌트인 메서드를 사용하는 방법이 있습니다.
2. JavaScript가 동적 언어인 이유는 무엇인가요?
- JavaScript의 변수는 선언이 아니라 할당에 의해 타입이 결정되기 때문에 재할당에 의해 언제든지 동적으로 변할 수 있습니다. 그래서 동적 언어라고 합니다.
2.1 정적 언어에 대해 설명해주세요.
- 정적 언어는 변수를 선언할 때 값의 타입을 사전에 선언해야야 하는 언어입니다. 정적 언어는 변수의 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있습니다.
3. 프로토타입에 대해 설명해주세요.
- 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 문의 변수에 할당합니다.
4. 깊은 복사와 얕은 복사에 대해 설명해주세요.
- 객체가 중첩되어 있을 때, 객체를 한 단계만 복사하는 것을 얕은 복사라고 하고 중첩되어 있는 모든 객체를 복사하는 것을 깊은 복사라고 합니다.
- 원시값을 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고 부르는 경우도 있습니다.
- 원시값을 할당한 변수를 다른 변수에 할당한 후 값을 바꾸면 두 변수는 메모리 주소가 다르기 때문에 서로 영향을 주지 않습니다. 반면에 객체를 할당한 변수를 다른 변수에 할당하면 두 변수가 같은 메모리 주소를 참조하고 있기 때문에 한 변수 값이 변경되었을 때 다른 변수 값도 같이 변경됩니다.
4.1 얕은 복사와 깊은 복사의 사용 예를 얘기해애주세요.
- 얕은 복사의 사용 예로는 Array의 프로토타입 메서드 slice, Object.assgin, spread 연산자 등이 있습니다.
- 깊은 복사의 사용 예로는 JSON.stringfy와 parse, loadash 라이브러리의 cloneDeep 메서드 등이 있습니다.
5. 불변성을 유지하려면 어떻게 해야 하나요?
- 원시값은 변경 불가능한 값이기 때문에 불변성이 유지됩니다.
- 반면에 객체는 변경 가능한 값이이어서 spread 연산자, loadash 라이브러리의 deep copy를 사용하여 기존 객체를 복사하거나, immers 라이브러리의 produce 메서드를 사용하여 객체의 불변성을 유지할 수 있습니다.
6. Blocking과 Non-Blocking에 대해 설명해주세요.
- blocking은 호출된 함수가 자신이 할 일을 마칠 때까지 제어권을 계속 가지고서 호출한 함수에게 바로 돌려주지 않는 상황을 의미합니다.
- non-blocking은 호출된 함수가 자신이 할 일을 모두 마치지 않았더라도 바로 제어권을 건네주어 호출한 함수가 다른 일을 진행할 수 있도록 해주는 상황을 의미합니다.
7. 동기와 비동기에 대해 설명해주세요.
- 동기는 호출된 함수의 수행 결과와 종료를 호출한 함수가 신경을 쓰는 경우를 의미합니다.
- 비동기는 호출된 함수의 수행 결과와 종료를 호출된 함수 혼자 직접 신경 쓰고 처리하는 경우를 의미합니다.
8. ES6에서 새로 생긴 기능을 아는대로 설명해주세요.
- let, const 키워드
- 변수가 블록 레벨 스코프를 가지며, 중복 선언이 되지 않고, 선언 단계와 초기화 단계가 분리됩니다.
- 화살표 함수
- spread 연산자
- spread 연산자를 사용하여 객체를 전개하여 객체들을 결합하기 수월해졌습니다.
- for .. of
- 이터러블을 순회할 수 있고, 내부에서 break 문을 사용할 수 있습니다.
- Map 객체
- 키와 값의 형태로 저장할 수 있고, 키에 다양한 데이터 타입을 허용하는 자료 구조입니다.
- Set 객체
- 중복을 허용하지 않는 값들을 모아놓은 컬렉션으로 키가 없는 값들이 저장됩니다.
- Classes
- JavaScript 객체를 위한 템플릿입니다.
- Promises
- 비동기 처리 상태와 결과값을 갖는 객체입니다.
- Symbol
- 중복되지 않고 변경 불가능한 원시 타입의 값입니다.
- default 매개변수
- 함수의 매개변수에 기본값을 설정할 수 있습니다.
- rest 매개변수
- 나머지 모든 인수들을 받아서 배열 형태 저장하여 사용할 수 있습니다.
- 구조 분해 할당
- 배열이나 객체를 개별 변수에 분해하여 할당할 수 있습니다.
- modules
- 코드를 독립된 파일로 나눌 수 있습니다. import/export 문을 사용하여 모듈을 가져오고 내보낼 수 있습니다.
9. null, undefined, undeclared를 비교해주세요.
- null은 값이 없다는 것을 의미하고, undefined는 변수가 초기화되지 않았음을 의미하며, undeclared는 변수 선언을 하지 않은 상태를 의미합니다.
10. JavaScript에서 비동기 로직이 어떻게 동작하는지 설명해주세요.(이벤트 루프)
- 이벤트 루프는 먼저 콜 스택에 실행 컨텍스트가 있는지 확인합니다. 그리고 콜 스택이 비어있을 경우, 마이크로 태스크 큐에 실행 컨텍스트가 있는지 확인합니다. 마이크로 태스크 큐에 실행 컨텍스트가 있을 경우 콜 스택으로 가져옵니다. 만약 마이크로 태스크 큐가 비어있다면, 태스크 큐에 실행 컨텍스트가 있는지 확인합니다. 태스크 큐에 실행 컨텍스트가 있다면, 태스크 큐에서 가장 먼저 대기하고 있던 실행 컨텍스트를 콜 스택으로 가져옵니다.
10.1 태스크 큐와 마이크로 태스트 큐에는 어떤 함수가 들어가나요?
- 마이크로 태스크 큐에는 프로미스의 후속 처리 메서드의 콜백 함수가 들어가고, 태스크 큐에는 비동기 함수의 콜백 함수나 이벤트 핸들러가 들어갑니다.
10.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 함수의 실행 컨텍스트가 콜 스택에 담기고 실행됩니다.
10.3 requestAnimationFrame에 대해 설명해주세요.
- requestAnimationFrame은 브라우저에게 수행하길 원하는 애니에이션을 알리고, 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출합니다.
- 콜백의 수는 보통 1초에 60회이지만, 대부분의 브라우저에서는 그 수가 디스플레이의 주사율과 일치하게 됩니다.
참고
