본문 바로가기
FE/JavaScript

[JavaScript] 실행 컨텍스트

by thedev 2023. 1. 3.

 

실행 컨텍스트

 


 

# 실행 컨텍스트 (excution context)

 

 실행 컨텍스트란, 자바스크립트에서 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 여기서 환경이란, 코드 실행에 영향을 주는 조건, 상태를 의미한다. 실행 컨텍스트는 식별자 결정을 더욱 효율적으로 하기 위한 수단으로서, 이를 이해하면 자바스크립트의 주요 개념인 스코프, 클로저, 호이스팅 등을 이해할 수 있다.

 

실행 컨텍스트

 

 자바스크립트 코드를 실행시키면, 자바스크립트 엔진은 콜스택이라는 공간에 실행 컨텍스트를 생성한다. 전역 범위에 해당하는 실행 컨텍스트를 생성하고 난 뒤, 그 속에 있는 함수A, 함수B, ... 들의 실행 컨텍스트도 생성한다. 이렇게 생성된 실행 컨텍스트는 위에서부터 차례대로 실행된다. 실행을 마친 실행 컨텍스트는 사라진다.

 

 각 실행 컨텍스트 안에는 많은 내용이 있지만, 이 글에서는 그 중에서도 렉시컬 환경(lexical environment)에 대해서 알아보려고 한다. 렉시컬 환경은 환경 레코드(environment record)와 외부 환경 참조(outer environment reference)로 구성되어 있다. 각각을 간단하게 record와 outer로 지칭해서 설명하려 한다.

 

 

# record : 식별자와 식별자에 바인딩된 값을 기록하는 객체

 

 record는 식별자와 식별자에 바인딩된 값을 기록하는 객체이다. 이때 식별자란 변수, 함수 같은 것이라고 이해할 수 있다. 코드를 실행시키면 자바스크립트 엔진은 코드를 스캔하여 변수를 record에 미리 기록해둔다. 이렇게 미리 기록해두기 때문에 호이스팅 현상이 발생할 수 있다. 호이스팅을 변수 호이스팅, 함수 호이스팅 두 종류로 구분하여 설명하고자 한다.

 

 

1. 변수 호이스팅

 

 var로 변수를 선언하면 메모리 공간을 확보하고 식별자와 연결한 뒤 자동으로 undefined로 값이 할당된다. let, const로 변수를 선언하면 메모리 공간을 확보하고 식별자와 연결하긴 하지만 값은 존재하지 않는다. 이후 따로 값을 선언해주어야 한다. 이 과정이 바로 record에서 일어난다.

 

 좀 더 자세히 설명하자면, 자바스크립트 엔진이 선언문만 먼저 실행해서 미리 record에 기록해두는 것을 생성 단계라고 하며, 선언문 외 나머지 순차적 코드를 실행하는 것을 실행 단계라고 한다. var는 생성 단계에서 선언과 동시에 초기값으로 undefined가 할당된다. 그러나 let, const는 실행 단계에서 메모리 공간을 확보하고 식별자와 연결하긴 하지만 초기값을 할당하지는 않는다. let, const의 초기값 할당은 선언 이후 할당문에서 일어난다. 따라서 let, const로 선언한 변수는 선언 이전에 참조할 수 없는데, 이 구역을 일시적 사각지대(TDZ, Temporal Dead Zone)이라고 한다.

 

 

2. 함수 호이스팅

 

 함수는 선언과 동시에 record에 함수 객체로서 기록된다. 따라서 함수 선언문 형식으로 선언하면 선언문 이전에도 함수를 사용할 수 있지만, 함수 표현식 방식으로 선언하면 선언문 이전에 사용할 수 없다. 함수가 아니라 변수처럼 동작하기 때문이다. var로 선언한 함수 표현식은 타입 에러, let, const로 선언한 함수 표현식은 참조 에러가 발생할 수 있다.

 

 

# outer

 

 자바스크립트 엔진이 변수나 함수의 값을 결정해나가는 것을 식별자 결정이라고 한다. 콜스택 안에 같은 식별자가 여러 번 등장할 때, 자바스크립트는 outer를 활용하여 값을 결정한다. 콜스택에서는 실행 컨텍스트가 차례대로 쌓이고, 가장 위에 있는 실행 컨텍스트가 활성화 되어있다. 만약 자바스크립트 엔진이 a라는 변수의 값을 찾고자 한다면 가장 위의 실행 컨텍스트, 즉 활성화 되어 있는 실행 컨텍스트에서 변수 a를 찾는다. a를 찾았다면 그 값을 출력해내고 다른 컨텍스트로 넘어가지 않고 그대로 변수 찾기를 멈춘다. 만약 찾지 못했다면 그 다음에 있는(= 바깥의) 실행 컨텍스트로 내려가 변수 a를 찾는다. 이렇게 식별자를 결정하기 위해 활용하는 스코프의 연결을 스코프 체인이라고 하고, 식별자를 찾기 위해 스코프를 타고 타고 돌아다니는 과정을 스코프 체이닝이라고 한다.

 


 

스코프 처음 배울 때는 아무것도 모르는 상태였어서 스코프는 그냥 범위 같은 건가...? 정도로 생각했었는데 ㅋㅋㅋㅋ 이제 조금 뭔지 알 것 같다 함수 표현식이랑 선언문을 구분하는 이유도 알 것 같음 클로저도 이해하고 싶다

 

 

참고 자료

https://youtu.be/EWfujNzSUmw