JS 문법 종합: 실행컨텍스트(스코프, 변수, 객체, 호이스팅)

실행 컨텍스트는 자바스크립트 코드 실행에 필요한 환경 정보를 담고 있는 객체입니다. 실행 컨텍스트가 활성화되면 자바스크립트는 변수를 호이스팅하고, 외부 환경 정보를 구성하며, this 값을 설정합니다. 이로 인해 자바스크립트는 다른 언어와 다른 특징을 가집니다.

 

1. 실행 컨텍스트란?

• 콜 스택: 실행할 코드의 환경 정보를 모아 놓은 실행 컨텍스트를 쌓아 올리는 스택. 최상단의 컨텍스트가 현재 실행 중인 코드의 환경을 제공

2. VariableEnvironment와 LexicalEnvironment

• VariableEnvironment (VE) 와 LexicalEnvironment (LE)
  • 둘 다 식별자 정보를 담지만, VE는 스냅샷을 유지하고, LE는 실시간으로 변경 사항을 반영
• 구성 요소: 식별자 정보(environmentRecord)와 외부 환경 정보(outerEnvironmentReference)를 포함

3. LexicalEnvironment와 호이스팅

• 호이스팅: 변수 및 함수 선언부를 코드의 상단으로 끌어올려 실행 전에 모든 변수 정보를 미리 수집하는 가상 개념
• 호이스팅 규칙:
  1. 변수 선언부만 호이스팅
  2. 함수 선언 전체가 호이스팅

4. LexicalEnvironment - 스코프, 스코프 체인, outerEnvironmentReference

• 스코프: 식별자의 유효 범위
• 스코프 체인: 식별자를 안에서부터 바깥으로 검색해 나가는 과정
• outerEnvironmentReference (outer): 함수가 선언된 당시의 LexicalEnvironment를 참조하여 스코프 체인을 가능하게 함

var a = 1;
function outer() {
    function inner() {
        console.log(a); // undefined
        var a = 3;
    }
    inner();
    console.log(a); // 1
}
outer();
console.log(a); // 1

 

 

• outer 함수 실행 시, inner 함수 실행 컨텍스트가 콜 스택에 쌓이며, a 변수는 호이스팅으로 인해 선언부가 끌어올려짐
• inner 함수 내에서 var a가 선언되었지만, 아직 할당되지 않아 undefined 출력
• outer 함수 내에서의 a 값은 1, 전역의 a 값도 1