들어가며
2장의 실행 컨텍스트를 공부하고 다음의 질문에 답해보자.
실행 컨텍스트란 무엇인가요?
실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.
실행 컨텍스트를 구성할 수 있는 방법에는 무엇이 있나요?
하나의 실행 컨텍스트를 구성할 수 있는 방법에는 전역 공간, eval 함수, 함수 실행 등이 있고 ES6 부터는 블록에 의해서도 새로운 실행 컨텍스트가 생성됩니다.
실행 컨텍스트 안에는 어떤 정보가 담겨있나요?
실행 컨텍스트 안에는 다음의 세 가지 정보가 담겨 있습니다.
VariableEnvironmentLexicalEnvironmentThisBinding
VariableEnvironment(이하 V.E) 와 LexicalEnvironment(이하 L.E) 는 똑같은 정보를 담지만, L.E는 함수 실행 도중에 변경되는 사항이 즉시 반영되고 V.E는 초기 상태를 유지하여 컨텍스트 생성 이후에는 L.E를 주로 활용하게 됩니다.
여기에는 매개변수명, 변수의 식별자(변수명), 선언한 함수의 함수명 등을 수집하는 environmentRecord와 바로 직전 컨텍스트의 L.E를 참조하는 outerEnvironmentReference로 구성되어 있습니다.
호이스팅이란 무엇인가요?
실행 컨텍스트가 생성되면서 L.E의 environmentRecord 에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장되며 이는 현재 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집하게 됩니다.
실제 코드가 실행되기 전에도 불구하고 자바스크립트 엔진이 식별자의 존재를 알게 되어 코드 해석에 문제가 없게 됩니다. 마치 실행 전 변수 정보들을 끌어올려 수집하는 과정을 이해하기 쉬운 방법으로 대체한 가상의 개념입니다. 실제로 끌어올리지는 않습니다.
함수 선언문과 함수 표현식에는 어떤 차이가 존재하나요?
호이스팅 과정에서는 식별자의 선언 부분만 수집하고 어떤 값이 할당되었는지는 관심이 없습니다.
이로인해 함수 선언문과 표현식에는 차이가 존재합니다.
console.log(sum(1, 2)); // 3
console.log(multiply(3, 4)); // undefined
function sum(x, y) {
return x + y;
}
var multiply = function (x, y) {
return x * y;
}위 예제의 경우 호이스팅을 통해 다음과 같이 변했다고 취급할 수 있습니다.
var sum = function sum(x, y) {
return x + y;
}
var multiply;
console.log(sum(1, 2)); // 3
console.log(multiply(3, 4)); // undefined
multiply = function (x, y) {
return x * y;
}함수 선언문은 전체를 호이스팅한 반면 함수 표현식은 변수 선언부만 호이스팅 됩니다.
스코프, 스코프체인이란 무엇인가요?
스코프는 식별자의 유효 범위를 말하며 ES5까지는 오직 함수에 의해서만 스코프가 생성되었습니다. ES6 부터는 블록에 의해서도 스코프가 생성됩니다.
스코프 체인은 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것을 말합니다. 현재 실행 컨텍스트에서 찾는 변수가 없다면 자신의 L.E에서 outerEnvironmentReference를 참조하고 바로 위 실행 컨텍스트에서 변수를 찾습니다.
여러 스코프에 동일한 식별자를 선언한 경우 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능합니다. 이를 통해 변수 은닉화가 가능합니다.
