프론트엔드 면접질문 및 답변 정리 - 자바스크립트 기본 편

자바스크립트 개념 중 이해하기 힘든 부분을 간단하게 질문 답변식으로 정리해 보았습니다.

클로저(Closure)란?

어떤 외부함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 변수가 메모리에 남아있는 현상을 말합니다.

 

클로저 사용으로 메모리 누수가 발생할 경우 어떻게 해결할까요?

함수를 참조하는 변수에 null을 할당하여 메모리 연결을 끊으면 됩니다.

 

let, const, var 차이점

var는 function scope이며, let, const는 block scope입니다.

var는 재선언하거나 함수 스코프 안에서 선언 전에 참조해도 애러가 나지 않고 undefined로 인식합니다.

const는 명시적으로 상수로 선언하며, 값을 재할당 할 경우 애러가 납니다.

 

호이스팅(Hoisting)이란?

해당스코프(Scope)안에서 최상단에서 선언한 것 처럼 동작하는 것을 말합니다.

 

let, const도 호이스팅이 되나요?

호이스팅이 안되는 것은 아니지만, 코드 실행이 변수가 실제 선언된 위치에 도달할 때 까지 참조할 수 없습니다.

 

Temporal Dead Zone(TDZ)
let/const선언은 실행중인 실행 컨텍스트의 어휘적 환경(Lexical Environment)으로 범위가 지정된 변수를 정의합니다.
변수는 그들의 어휘적 환경에 포함될 때 생성되지만, 어휘적 바인딩이 실행되기 전까지는 액세스할 수 없습니다.
새로운 범위에 진입할 때마다 지정된 범위에 속한 모든 let/const바인딩이 지정된 범위 내부의 코드가 실행되기 전에 실행됩니다. (즉, let/const선언이 호이스팅됩니다.)
어휘적 바인딩이 실행되기 전까지 액세스할 수 없는 현상을 TDZ라고 합니다.

프로토타입(Prototype)이란?

자바스크립트의 모든 객체는 부모 역할을 하는 객체와 연결되어 있습니다. 이것은 상속과 같은 개념으로, 인스턴스가 사용할 프로퍼티나 메소드를 부모 객체의 프로토타입에 구현해놓으면 부모 객체의 프로퍼티나 메소드를 자신의 것 처럼 쓸 수 있습니다. 자바스크립트에서는 이러한 부모 객체를 프로토타입이라고 합니다.

 

프로토타입 체인이란 무엇인가요?

객체의 프로퍼티에 접근하려고 할때, 객체에 프로퍼티가 없으면 __proto__ 접근자 프로퍼티를 따라 자신의 부모 역할을 하는 객체를 순차적으로 이동하며 찾습니다.  모든 프로토타입도 객체이기 때문에, 최상위 객체인 Object.prototype까지 도달합니다.

실행 컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다. 최초에 전역 컨텍스트가 콜 스텍에 추가되어 활성화되고, 함수 수행시 함수의 실행 컨텍스트가 콜스텍에 추가되어 활성화됩니다.

 

환경정보에는 정보가 있나요?

변수객체, 스코프체인, this

 

스코프체인이 무엇인가요?

스코프는 변수의 유효범위를 말합니다. 현재 실행 컨텍스트부터 실행 컨텍스트 따라 올라가면서 변수를 찾는 것을 말합니다.

 

This에 대해 설명해보세요.

일반적으로 모든 함수에서 this는 전역 객체(window)를 가리키며, 화살표함수에서는 상위 scope의 this를 가리킵니다. 호출 방법에 따라 this가 달라지는데, 함수 앞에 .을 사용하여 호출할 경우 . 앞이 this가 됩니다. new 를 통해 인스턴스를 생성한 경우 해당 함수 내부, 즉 constructor에서는 해당 인스턴스가 this가 됩니다.

 

call, apply, bind에 대해 설명해보세요.

call과 apply는 기능적으로 같습니다. call과 apply의 첫 번째 인자로 this를 바인딩하여 호출하고, call은 두 번째 인자부터 함수에 인자로 전달하여 호출합니다. apply는 두 번째 인자를 배열로 전달합니다.

bind는 ES5에서 추가된 기능으로, this를 인자로 넘기면 this가 바인딩된 새로운 함수를 반환합니다.  

'use strict'에서의 this는 어떻게 다른가요?

this가 더 이상 전역 객체(window)를 반환하지 않습니다. 전역 객체대신 undefined를 반환합니다.

 

메소드 체이닝이란?

자기 자신을 반환하는 함수를 연결하여 호출하는 것을 말합니다. 코드가 간략해지고 작은 단위로 기능을 쪼갤 수 있습니다.

var square = new Square(); square.setWidth(100).setHeight(100).setColor('white').getInfo();

 

메소드 체이닝의 단점은 어떤게 있나요?

어느부부에서 애러가 났는지 알기 어렵기 때문에, 디버깅이 어려워집니다.