[ 한 번에 모아보는 프론트엔드 면접 질문 ] JavaScript
콜 스택과 힙에 대해서 설명해주세요
자바스크립트 엔진이 자바스크립트를 실행할 때 원시 타입 및 참조 타입을 저장하는 메모리 구조입니다
콜 스택 : 원시타입 값과 함수 호출의 실행 컨텍스트를 저장하는 곳
힙 : 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값을 저장하는 곳
어떻게 동작하나요?
맨 처음, GEC(Global Execution Context)가 생성되고 원시 값은 콜 스택에, 참조 값은 힙에 저장됩니다
그 후 함수를 실행하게 되고, 새로운 FEC(Function Execution Context)가 생성되며 동일하게 저장됩니다
함수가 결과를 return해서 저장하면 FEC는 콜 스택에서 제거됩니다.
마지막으로 전체 코드 실행이 끝나고 GEC가 콜 스택에서 제거됩니다.
GEC가 제거됨에 따라 힙의 객체를 참조하는 스택의 값이 사라지기 때문에 Garbage Collector에 의해 제거됩니다.
실행 컨텍스트란?
실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.
실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고,
이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다
실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행합니다.
실행 컨텍스트는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다.
실행 컨텍스트의 객체에 담긴 정보는 무엇이 있나요?
variable environment
현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보
선언 시점의 Lexical Environment의 스냅샷으로, 변경 사항은 반영되지 않습니다
Lexical Environment
변경 사항이 실시간으로 반영됩니다
ThisBinding
this 식별자가 바라봐야 할 대상 객체
전역 컨텍스트란?
코드 내부에서 별도의 실행 명령 없이 브라우저에서 자동으로 실행하는 컨텍스트입니다.
콜 스택에서 전역 컨텍스트와 관련된 코드들을 순차적으로 진행하다가 outer 함수를 호출하면 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성한 후 콜 스택에 담습니다.
콜스택의 맨 위에 outer 실행 컨텍스트가 놓인 상태가 되었으므로 전역 컨텍
스트와 관련된 코드의 실행을 일시중단하고 대신 outer 실행 컨텍스트와 관련된 코드, 즉 outer 함수 내부의 코드들을 순차로 실행합니다
자바스크립트 이벤트 루프의 필요성?
자바스크립트는 단일 스레드 기반 언어로, 자바스크립트 엔진이 단일 콜 스택을 갖습니다.
이 말은 요청이 동기적으로 처리된다는 것을 의미합니다.
이 때 자바스크립트의 비동기 요청 처리를 위해 자바스크립트 엔진과 그 실행 환경을 상호 연동시켜주는 장치인 '이벤트 루프'가 필요합니다.
(이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속합니다)
이벤트 루프의 동작 원리
이벤트 루프는 두개의 큐를 감시하고 있다가 콜 스택이 비면 콜백함수를 꺼내와 실행시킵니다.
이 때 마이크로태스크 큐의 콜백함수가 우선순위를 가지게 됩니다.
따라서 마이크로태스크 큐의 콜백함수를 전부 실행하고 나서 태스크 큐의 콜백함수를 실행하게 됩니다.
태스크 큐와 마이크로태스크 큐에 대해 설명해주세요
자바스크립트의 실행 환경은 태스크 큐와 마이크로태스크 큐를 가지고 있습니다.
태스크가 콜백함수라면 그 종류에 따라 다른 큐에 담기며
태스크 큐에는 setTimeout, setInterval, UI 렌더링, requestAnimationFrame등이 담기고
마이크로태스크 큐에는 Promise, MutationObserver등이 있습니다.
자바스크립트의 프로토타입에 대해 설명해주세요
자바스크립트의 모든 객체는 자신의 원형(Prototype)이 되는 객체를 가지며 이를 프로토타입이라고 합니다.
보이지 않는 속성인 [[Prototype]]이 자신의 프로토타입 객체를 참조합니다.
(이를 __proto__라는 속성으로 참조할수 있으나 이는 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야 합니다)
.prototype와 [[Prototype]]의 차이
모든 객체는 은닉 속성인 [[Prototype]]을 갖는데 특별히 함수 객체는 접근할 수 있는 속성인 prototype을 갖습니다.
[[Prototype]]은 자신의 프로토타입 객체를 참조하는 속성이고
.prototype는 new 연산자로, 자신을 생성자 함수로 사용한 경우, 그것으로 만들어진 새로운 객체의 [[Prototype]]이 참조하는 값입니다
new 연산자로 새로운 객체 a를 생성하면,
a의 프로토타입 객체 : 생성자 함수로 사용한 함수(fc.prototype)
fc.prototype은 constructor 속성을 가지며 이는 실제 객체 fc를 가리킨다.
fc.prototype 또한 객체, [[Prototype]]을 가지게 된다
이 [[Prototype]]은 모든 객체의 원형이 되는 객체인 Object.prototype을 가리킨다
프로토타입 체인에 대해서 설명해주세요
어떤 객체의 프로퍼티를 참조하거나 값을 할당할 때 해당 객체에 프로퍼티가 없는 경우,
그 객체의 프로토타입 객체를 연쇄적으로 확인하면서 프로퍼티를 찾는 방식을 프로토타입 체인이라고 합니다.
특이사항으로는, 참조할 때와 값을 할당할 때의 메커니즘이 다르다는 점입니다
참조할 때?
찾고자 하는 프로퍼티가 객체에 존재하면 사용합니다.
만약 객체에 존재하지 않는다면 [[Prototype]] 링크를 타고 끝까지 올라가면서 해당 프로퍼티를 찾습니다
찾으면 그 값을 사용하고 없으면 undefined를 반환합니다
할당할 때?
찾고자 하는 프로퍼티가 객체에 존재하면 값을 바꿉니다.
그러나 프로퍼티가 없다면 [[Prototype]] 링크를 타고 올라가서 프로퍼티를 찾습니다.
만약 프로퍼티가 변경가능한 값(writable : true)라면 새로운 직속 프로퍼티를 할당해서 상위 프로퍼티가 가려지는 현상이 발생하게 됩니다
프로퍼티가 변경불가능한 값(writable: false)라면 비엄격 모드에선 무시되고 엄격 모드에서는 에러가 발생하게 됩니다
해당 프로퍼티가 setter일 경우, 이 setter가 호출되고 가려짐이 발생하지 않습니다
프로퍼티의 종류는 뭐가 있나요?
자바스크립트 객체의 프로퍼티는 data property와 accessor property, 두 종류로 나뉩니다.
데이터 프로퍼티는 우리가 일반적으로 조작하는 프로퍼티입니다.
접근자 프로퍼티는 함수를 본질로 가집니다. 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당합니다.
접근자 프로퍼티는 getter과 setter메서드로 표현됩니다
객체 리터럴 안에서 getter과 setter 메서드는 get과 set으로 나타낼 수 있습니다
getter와 setter는 언제 실행되나요?
getter 메서드는 프로퍼티를 읽으려고 할 때 실행되고
setter 메서드는 프로퍼티에 값을 할당하려 할 때 실행됩니다.
Strict mode(엄격 모드)는 무엇인가요?
ECMAScript5부터 도입된 기능으로, 기존에 무시되던 에러들을 무시하지 않고 발생시킵니다.
파일 전체에 적용할 수도 있고 함수 스코프에 적용시킬 수도 있지만 블록 스코프는 불가능합니다
특징으로는
- var가 생략된 변수를 전역객체에 바인딩 하지 않는다
- 제거할 수 없는 프로퍼티를 제거할 수 없다
- 함수의 매개변수 이름은 중복될 수 없다
- 일반 변수를 삭제할 수 없다
등이 있습니다
new 연산자는 어떻게 동작하나요?
먼저 빈 객체를 생성하고 [[Prototype]] 속성을 생성자 호출할 함수의 prototype 속성으로 지정합니다
만약 함수의 prototype 속성이 원시값이라면 Object.prototype으로 지정됩니다.
그 후 객체를 생성하고 이 객체를 this로 지정합니다.
함수를 호출하고 해당 함수의 this로 위에서 지정한 객체를 사용합니다
함수의 리턴값이 원시값이라면 새로 만들어진 객체가 리턴되고 리턴값이 객체라면 해당 객체가 리턴됩니다
ES6(ES2015)의 특징은 무엇인가요?
화살표 함수, 클래스, 템플릿 문자열, 모듈 등이 있습니다
화살표 함수는 기존 함수와 달리 this가 함수 스코프에 바인딩 되지 않고 렉시컬 스코프를 가집니다.
즉 자신을 감싸는 코드와 동일한 this를 공유한다는 특징이 있습니다
Class는 프로토타입 기반의 객체지향 패턴을 쉽게 만든 장치로, 상속과 생성자 및 인스턴스와 정적 메서드 등을 지원합니다
템플릿 문자열은 백틱을 이용해 문자열과 변수 사용을 쉽게 사용할 수 있게 되었습니다.
import로 Module을 불러내고 export로 모듈을 내보낼 수 있습니다