실행 컨텍스트, 렉시컬 환경, 호이스팅

[펌] 실행 컨텍스트, 렉시컬 환경, 호이스팅

요약 :

1. 자바스크립트 엔진은 함수 호출을 만나면 실행 컨텍스트(Execution Context)를 생성하여 콜 스택에 넣는다.

2. 실행 컨텍스트의 베이스는 Global Execution Context이다.

3. 자바스크립트 로딩 시 제일 먼저 글로벌 실행 컨텍스트가 생성되고 이 안에 실행 컨텍스트들이 쌓인다.

4. 글로벌 실행 컨텍스트의 내부에서 값을 메모리에 할당하고 코드를 구동시킨다.

5. 렉시컬 환경(Lexical Environment)은 특정 코드가 작성, 선언된 환경이다.

6. 함수 a 안에 변수 b가 선언되었다고 하면 b의 렉시컬 환경이 a가 된다.

7. 사용하고자 하는 함수, 변수의 렉시컬 환경이 어디에 속해있는지 아는 것은 매우 중요하다.

8. 특히, ‘어디에서 호출했는지’보다는 ‘어디에서 선언했는지’, 즉 렉시컬 환경이 어디인지를 알아야한다.

9. 모든 실행 컨텍스트들은 생성 단계와 실행 단계의 작업으로 이루어진다.

10. 생성 단계에서 호이스팅이 일어나며 변수, 함수를 각 스코프의 최상단으로 끌어올려 선언하게 된다.

11. 변수는 메모리 저장 시 3 단계를 거친다.

12. 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록

13. 초기화 단계 : 실행 컨텍스트에 등록된 변수에 메모리 할당. undefined로 초기화.

14. 할당 단계 : undefined로 초기화된 변수에 값을 할당

15. var는 선언과 초기화가 동시에 진행되어 호이스팅 시 undefined로 초기화된다. 선언 전에 사용이 가능하다.

16. let은 선언과 초기화가 분리되어 진행되기 때문에 호이스팅 시 초기화가 되어있지 않아 이 값에 접근 시 ReferenceError가 발생한다.

17. const는 반드시 선언, 초기화, 할당을 동시에 해주어야한다.

    console.log(a);
    var a; // undefined
        
    console.log(b);
    let b; // ReferenceError
        
    console.log(c);
    const c; // Uncaught SyntaxError: Missing initializer in const declaration
        
    a = 1;
    b = 2;
    

18. let은 선언 전에 사용하지 못한다고해서 호이스팅이 일어나지 않는다는 뜻이 아니다.

19. let과 const는 TDZ(Temporal Dead Zone)의 영향을 받아 할당하기 전에는 사용할 수 없다.

참고 자료

자바스크립트의 실행 컨텍스트와 호이스팅

자바스크립트 중급 강좌 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)