자바스크립트 실행 컨텍스트(Execution Context)

 

자바스크립트 실행 컨텍스트(Execution Context)

실행 컨텍스트는 코드 실행과 흐름을 관리하는 핵심 원리다.

이 개념을 정확히 이해하면 스코프나 호이스팅, this, 클로저와 같은 개념을 잘 이해할 수 있다.

 

실행 컨텍스트는 자바스크립트 코드가 이벤트 루프로 부터 콜스택으로 이동하게 되고난 후 실행될때 생성되는 환경을 말한다. 실행 컨텍스트는 필요한 정보를 저장하고 관리하게된다.

 

핵심 역할

• 코드 실행에 필요한 정보 관리
• 변수, 함수 선언을 메모리에 저장하고 참조
• this 바인딩을 결정
• 스코프와 클로저를 관리

 

핵심 역할 중 변수, 함수 선언을 메모리에 저장하고 참조하기 때문에 호이스팅 개념이 가능한 것이고..

이때 상위 스코프의 변수, 함수선언을 참조하기 때문에 가비지컬렉터의 대상이 되지 않기 때문에 외부 함수의 실행 컨텍스트가 종료되어도 내부 함수에서 외부 함수에 변수에 여전히 참조할 수 있는 클로저의 개념도 가능한 것이다..

 

 

실행 컨텍스트의 종류 3가지

• 전역 실행 컨텍스트: 자바스크립트가 실행될 때 가장 먼저 생성되며, this는 전역 객체를 가르킨다. (Host object)
• 함수 실행 컨텍스트: 함수가 호출될때마다 생성된다.
• Eval 실행 컨텍스트: eval() 함수를 실행할때 생성된다. (사용지양) -> 이건 정확한 개념을 모르겠다.

 

 

실행 컨텍스트

자바스크립트는 실행 컨텍스트를 스택 구조로 관리한다.

스택은 선입 후출로 동작한다. (새로운 실행 컨텍스트가 실행되면 스택에 push, 끝나면 pop한다.)

 

예시

function first() {
    console.log("첫번째");
    second();
}

function second() {
    console.log("두번째");
}

console.log("전역 실행 컨텍스트");
first();

1. 전역 실행 컨텍스트 생성 
2. 콘솔 출력 "전역 실행 컨텍스트"
3. first 함수 실행되며 first 실행 컨텍스트 생성
4. first 내부의 "첫번째" 콘솔 출력
5. first 내부 second 함수 실행되며 second 실행 컨텍스트 생성
6. second 내부의 "두번째" 콘솔 출력
7. second 내부 로직 끝났으므로 second 실행 컨텍스트 제거
8. first에서 호출한 second 함수 종료되었으므로 first 함수 실행 종료되며 first 실행 컨텍스트 제거

 

 

실행 컨텍스트의 구조 3가지

• 변수 환경: var 선언 변수, 함수 선언문 저장, 함수 실행이 끝나면 제거
• 렉시컬 환경: let, const 선언 변수, 함수 표현식 저장, 외부 환경 참조(스코프체인) - 함수 실행이 끝난 후에도 유지되므로 클로저 개념의 주요 핵심
• this 바인딩: 현재 실행 컨텍스트에서 this가 참조하는 객체

 

변수 화경과 렉시컬 환경의 차이는 저장 대상이고 저장 대상의 변수 초기화 여부와 TDZ(Temporal Dead Zone) 여부이다.

호이스팅 개념에서 알 수 있듯..

var로 선언한 변수와 함수 선언문은 호이스팅되는데 이 이유가 변수의 선언과 동시에 초기화가 되어서 이고

let, const로 선언한 변수와 함수 표현식은 호이스팅되지않는 이유가 변수의 선언과 초기화가 구분되어있어서이다. (때문에 tdz 상태, 선언 전 접근 불가)

 

 

 var 변수 예시

console.log(a); // undefined (초기화됨)
var a = 10;
console.log(a); // 10

// 실행 컨텍스트 내부 구조
┌───────────────────────────────────┐
│  변수 환경 (Variable Environment) │
│  - var a: undefined → 10          │
└───────────────────────────────────┘

 

var a는 선언 전 콘솔로그 출력 시 오류가 나지 않는다. 왜냐하면 실행 컨텍스트에서 변수 환경을 수집하고, 이때 즉시 undefined로 초기화 시키기 때문에 var의 선언보다 상위에 있는 콘솔 출력을 해도 에러가 발생하지 않는다.

 

 

let과 const 변수 예시

console.log(b); // ReferenceError (TDZ)
let b = 20;
console.log(b); // 20

// 실행 컨텍스트 내부 구조
┌───────────────────────────────────┐
│  렉시컬 환경 (Lexical Environment) │
│  - let b: (초기화되지 않음, TDZ)   │
└───────────────────────────────────┘

let b는 렉시컬 환경에 저장은 되지만 초기화 되지 않은 상태로 (TDZ 상태) 상위 콘솔에서 출력 시 레퍼런스 에러가 발생한다.

 

 

실행 컨텍스트 내부 구조 정리

실행 컨텍스트는 변수 환경과 렉시컬 환경이 존재한다.

이 두개는 서로 비슷한 역할을 하지만 엄밀히 구분된다.

 

• 변수 환경 (Variable Environment)
  • 실행 컨텍스트가 생성될 때 초기 변수 정보를 저장하는 공간
  • var로 선언된 변수와 함수 선언문(function declaration)을 저장
  • 실행 중 변경될 수도 있음
  • 함수 실행이 끝나면 제거되므로, 외부 변수를 기억할 수 없음
• 렉시컬 환경 (Lexical Environment)
  • 현재 실행 컨텍스트의 스코프 정보를 담고 있음
  • let, const로 선언된 변수 저장
  • 외부 환경 참조하여 스코프 체인 관리 (클로저)
    • 함수 실행이 끝난 후에도 유지될 수 있어 클로저에서 외부 변수를 접근 가능

 

 

실행 컨텍스트에서 TDZ(Temporal Deal Zone)이 필요한 이유

자바스크립트에서 let, const 변수 선언, 함수 표현식의 경우 초기화가 되기 전까지 접근할 수 없는 영역을 말한다. (class도 tdz 상태를 가진다.)

변수가 선언되었지만, 값이 할당되지 않은 상태에서 접근할 수 없도록 보호하는 장치이다. (호이스팅 방지)

tdz가 없는 경우 var의 변수처럼 혼란을 야기할 수 있다. (변수의 선언 전이지만 실행컨텍스트의 동작 상 변수 환경을 먼저 저장하기 때문에 에러가 나기 전 undefined가 출력되는 현상이 생긴다. 또한 const는 재할당이 불가능한 변수이기 때문에 불변성을 유지해준다. 왜냐하면 초기 값으로 undefined를 할당하게되면, 이후 개발자가 넣은 초기 값이 할당되면서, 동작상 두번 할당되게 되므로 불변적이지 않으니까...) 

따라서 var를 선언한 것보다 let과 const를 사용한 경우 버그 위험을 줄이고, 호이스팅 현상을 더 예측 가능하도록 명확히 만든다. 

TDZ는 실행 컨텍스트에서 변수의 환경을 수집할때 생성되며, 이후 변수 선언 줄을 지나면(초기화 되면) 해제된다. 

 

 

그렇다면 let과 const가 초기화가 된 이후에 변수 환경으로 이동할까? (X)

렉시컬 환경에 담긴 이후 var 변수가 초기화 되어도 이동되지 않는다.

변수 환경은 함수 실행이 끝나면 제거되기 때문에 let과 const 변수가 변수 환경으로 이동되어 버리면 스코프체인이 동작하지 않게되며(외부 변수 기억을 못하므로) 클로저 동작이 되지 않는다.

- 클로저는 변수가 렉시컬 환경에 남아 있어야만 정상 동작할 수 있다.