자바스크립트) 실행컨텍스트, 호이스팅, 렉시컬환경, 스코프체인

0. 실행컨텍스트

🔸정의 : 코드를 실행하는데 필요한 환경 정보를 모아놓은 객체 / 자바스크립트가 코드를 실행하기 위해 관리하는 Stack 구조의 실행환경

자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 됩니다.

스택의 경우 FILO (First In, Last Out) 의 구조이기에 순서를 보장, 콜스택 내부에 쌓인 실행 컨텍스트의 정보를 통해 환경을 보장할 수 있는 것

 

여기서 환경이란 전역공간이 될 수 있고, 함수 즉 함수 내부의 환경이 될 수 있다.

 

🔸코드 실행 2단계

1단계(생성단계/소스코드 평가 과정) : 자바스크립트는 소스코드를 실행하기 전에 소스코드 전체를 훑으면서 문제가 없는지 체크하는 과정을 거친다. 실행컨텍스트를 생성하고 변수 및 함수를 환경레코드에 기록하는 단계

2단계(실행단계) : 소스코드를 한줄 씩 실행하는 단계

 

🔸실행컨텍스트는 언제 생성될까?

자바스크립트 엔진이 스크립트를 처음 마주할 때 전역 컨텍스트를 생성하고, 콜 스택에 push를 함. 엔진이 스크립트를 쭉 읽어내려가면서 함수 호출을 발견할 때마다, 함수의 실행컨텍스트를 스택에 push한다. 중요한 점은 함수 실행 컨텍스트는 함수가 실행될 때 만들어진다는 점이다. 
함수를 선언할 때가 아니라 실행할 때이다.

 

1. console.log(a) (전역 스코프): 전역 변수 a는 값 1을 가지고 있으므로 1을 출력합니다. 2. console.log(a) (inner 함수 내부): inner 함수 내부에서 a 변수가 호이스팅되어 선언되었지만 초기화되지 않았으므로 undefined를 출력합니다. 3. console.log(a) (inner 함수 내부): a 변수에 값 3이 할당되었으므로 3을 출력합니다. 4. console.log(a) (outer 함수 내부): outer 함수 내부에서는 전역 스코프에 있는 a 변수를 참조합니다. 따라서 1을 출력합니다. (스코프 체인 때문)

 

🔸실행컨텍스트의 종류

1) 전역컨텍스트 2) 함수 실행 컨텍스트 3) eval() 실행컨텍스트

1)전역컨텍스트(Global Execution Context)  : 코드가 실행되기 전에 생성이 되며, 함수 내에 없는 코드는 모두 전역 실행 컨텍스트 안에 존재한다. 그렇기 때문에, 자바스크립트 엔진은 일부 자바스크립트 코드를 실행할 때마다 글로벌 실행 컨텍스트(Global Execution Context)를 작성한다. 글로벌 실행 컨텍스트의 특징으로는 무조건 하나의 전역 실행 컨텍스트 만이 존재하며, 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지하는 것이다. 브라우저의 경우에는 window객체, Node.js의 경우엔 global객체가 곧 전역 실행 컨텍스트가 된다.

2) 함수 실행 컨텍스트(Functional Execution Context) : 전역 실행 컨텍스트가 생성된 후, 함수가 실행(ex 호출) 될 때마다 새로운 실행 컨텍스트가 작성된다.

3) eval() 실행 컨텍스트 eval 함수로 실행되는 코드. 이제 쓰지 않는 eval() 함수에 의해 생성되는 실행 컨텍스트이다.

 

 

실행컨텍스트 객체는 활성화 되는 시점에 VariableEnvirionment(환경변수),LexicalEnvironment(렉시컬 환경),ThisBinding의 세가지 정보를 수집한다.

 

Variable Environment와 Lexical Environment는 매개변수명, 변수의 식별자, 선언한 함수명 등을 수집하는 environment Record와 바로 직전 컨텍스트의 렉시컬 환경 정보를 참조하는 outer Environment Reference로 구성되어있다.

1. 실행컨텍스트 안 렉시컬 환경

🔸 뜻 : 모든 식별자(변수,함수, 매개변수명 등)와 바인딩(식별자와 그에 대한 값을 연결하는 정보) 된 값, 상위 스코프에 대한 참조를 기록하는 자료구조

실행컨텍스트 스택이 코드의 실행순서를 관리한다면, 렉시컬 환경은 스코프와 식별자를 관리한다. 렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프를 생성해서, 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다.

 

🔸렉시컬 환경 안 환경레코드와 외부 렉시컬 환경

환경레코드	외부 렉시컬 환경
변수,함수 등의 식별자와 그에 대한 바인딩 정보를 저장한다. 전역 스코프와 함수 스코프에서 각각 환경 레코드가 생성되며, 해당 스코프 내에서 선언된 변수와 함수가 여기에 등록된다.	현재 렉시컬 환경과 연결된 외부 스코프의 렉시컬 환경을 참조한다. 이를 통해 변수가 스코프 체인을 따라 상위 스코프로 이동하여 검색될 수 있다.

 

2. 렉시컬 환경과 호이스팅

var name = 'eunhye';

console.log(name); // eunhye

console.log(name); // undefined

var name = 'eunhye';

선언하기도 전에 값을 호출했는데 Reference error가 발생하지 않고, undefined(할당되지 않음)만 호출이 되었다. 

호이스팅과 관련이 있다.

 

호이스팅 : 자바스크립트 엔진이 실행 컨텍스트를 구성할 때 envirionment Record(환경 레코드)에 식별자의 정보를 수집한다. 이러한 과정을 통해 엔진은 함수를 실행하기도 전에 해당 컨텍스트 내부의 변수명들을 이미 알고있다. 

따라서, 식별자들을 코드의 최상단으로 끌어올렸다 라는 호이스팅 개념이 생겨난다. 물리적으로 끌어올린 것이 아닌, 실행 컨텍스트 관점에서 이미 식별자들의 정보를 알고 있으니, 식별자 정보를 수집하는 과정을 이해하기 쉬운 방법으로 나타낸 개념이다. 

 

즉, 렉시컬 환경의 환경레코드의 경우 해당 컨텍스트 환경에 필요한 식별자와 식별자의 값이 기록되며, 함수 실행시 실행컨텍스트가 생성되므로 (함수 실행보다 환경레코드 수집이 먼저 되므로) 변수와 같은 식별자를 끌어올리는 것 같다 라는 개념의 호이스팅이 생겨났다. 

 

3. 렉시컬 환경의 Outer Envirionment Reference로 스코프 체이닝, 식별자 결정 이해하기

 

🔸스코프 체인 : 자바스크립트 엔진은 식별자를 찾을 때 일단 자신이 속한 스코프에서 찾고 그 스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다.  

outerEnvironmentReference 란 해당 함수가 선언된 위치의 LexicalEnvironment 를 참조하며, 변수에 접근을 한다면 해당 LexicalEnvironment 에서 발견된다면 사용, 찾지 못할 경우 다시 outerEnvironmentReference 참조하여 탐색하는 과정을 반복한다. 이러한 과정을 스코프 체인 이라고 하며 outerEnvironmentReference 는 스코프체인을 가능케하는 역할이다.

---

참고자료

https://curryyou.tistory.com/277

[자바스크립트] 코드 실행 2단계와 변수/함수 생성 과정

https://gamguma.dev/post/2022/04/js_execution_context

JS Execution Context (실행 컨텍스트) 란? | 감구마 개발블로그

https://www.youtube.com/watch?v=EWfujNzSUmw