[JavaScript] 실행 컨텍스트

https://youtu.be/EWfujNzSUmw?si=Ik297-UzEH90eSmO

위의 강의 정리한 내용

 

실행 컨텍스트는 각 스코프별로 코드가 실행되는 환경 정보를 담고 있는 객체이다. 코드 실행을 위해 존재한다.

 

0. 실행 컨텍스트는 언제 생성하고 언제 없어지는가

- 코드 실행시키면 콜 스택에 실행 컨텍스트를 담는다.

- 글로벌 실행 컨텍스트 위에 함수A의 실행 컨텍스트가 올라가고... 이런식. 가장 위에 있는 실행 컨텍스트만 활성화됨.

- 일단 실행되면 사라진다.

- 마지막 라인까지 코드가 모두 실행되면 글로벌 실행 컨텍스트도 사라진다.

 

1. Record로 호이스팅 이해

console.log(name);
var name = "doringri";

- var로 정의한 변수 선언문 이전에 해당 변수의 값을 찍었을 때 에러가 일어나지 않는 현상이 호이스팅이다.

- 자바스크립트 엔진이 전체 코드를 먼저 스캔한다음 변수 선언문을 먼저 기록해두는데 그곳을 Record라고 한다.

- var로 정의했기 때문에 undefined로 초기화까지 시켜서 레코드에 <name, undefined> 로 기록해놓는다.

- 여기까지를 생성 단계라고 한다.

- 그리고 나머지 코드를 실행하는데, 이건 실행 단계라고 한다.

- 여기서 doringri라는 값을 할당해서 레코드에 기록한다.

- 그러나 var이 아닌 let, const로 선언하면 아직 초기화가 안돼서 접근을 못하는데, 이걸 TDZ라고 한다.

- 함수 표현식은 변수와 같은 방식으로 동작한다. var로 선언시 undefined를 호출하려 해서 type error가 난다.

- let이나 const로 함수 표현식을 선언하면 초기화가 안되어있어서 reference error가 난다.

- 그러나 함수 선언식은 선언과 동시에 함수가 생성되고 레코드에 저장되어 선언식 이전에도 쓸 수 있다.

 

2. Outer로 스코프체이닝 이해

- Outer는 외부 환경 참조, 즉 현재 환경 바깥의 렉시컬 환경이라고 한다.

let lamp = false;

function goTo2F() {
    let lamp = true;
    console.log(lamp);    // ?
}

- 위의 코드에서 console.log는 두 가지의 lamp 변수 중 어떤 것을 실행해야 할지 결정해야 한다.

- 이를 식별자 결정이라고 한다. (코드에서 변수, 함수의 값을 결정하는 것)

- 위 코드 기준으로 하면 콜스택 안에 두 개의 실행 컨텍스트가 생성되어 있을 것이다.

- 위에 있는 실행 컨텍스트(goTo2F)는 밑에 있는 실행 컨텍스트(글로벌)로 돌아갈 수 있는 Outer를 만들어 놓는다.

- 즉 현재 내 실행 컨텍스트에 값이 없으면 가장 가까운 바깥에 있는 값을 참조해온다.

- 없으면 계속 바깥으로 타고타고 가서 찾는다. 이처럼 식별자 결정을 위해 연결된 스코프를 스코프 체인이라고 한다.

- 글로벌에도 없으면 reference error가 난다.

 

3. 실행 컨텍스트 종합 정리

ES3까지는 식별자 결정을 위해 다른 외부 함수의 스코프까지 찾았기에 퍼포먼스가 좋지 못했음.

하지만 ES5부터는 실행 컨텍스트 개념이 추가되면서 하나의 실행 컨텍스트에서 스코프 체인을 통해 외부 렉시컬 환경으로 이동하며 좀더 한정된 범위에서 식별자 결정이 가능하게 됨.