[ES6]_Execution Contexts (실행 컨텍스트) 이해

개요

스크립트 개발 혹은 공부를 하거나

면접 준비를 하다보면,

 

호이스팅 이란 개념에 대해 자주 나옵니다

 

호이스팅을 공부하다 보면, 이번엔 실행 컨텍스트를 공부를 필수적으로 해야 합니다.

 

제가 문서를 보고 분석한 내용을 설명하고자 합니다.

 

문서 https://262.ecma-international.org/6.0/

ECMAScript 2015 Language Specification – ECMA-262 6th Edition

 

틀린것이 있을 수 있으니 양해부탁드립니다. 

틀린점은 댓글로 알려주시면 정말 감사드리겠습니다.

---

실행 Context 이해

 

= 코드 실행의 범위

 

개념 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 ( 추상적 )

 

자바스크립트 엔진에서 코드가 실행된다는 것은 실행 컨텍스트 내부에서 코드가 실행되고 있다고 생각하면 됩니다.

 

실행 컨텍스트 (Execution Context) 의 종류

 

1. Global Context (전역 컨텍스트)

• 함수 실행을 제외한 모든 스크립트는 해당 전역 컨텍스트에서 실행됩니다.
• 스택 구조를 가진 Execution Context (실행 컨텍스트) 가 생성이 된 후 global object 로 window 가 this 에 할당되고 스택에 쌓이게 됩니다.
• 스택 구조이므로 가장 마지막에 들어온 실행 컨텍스트 가 가장 먼저 실행되면서 진행됩니다 (Last In First Out)

2. Functional Context (함수 컨텍스트)

• 선언된 함수가 호출이 될 때를 기점으로 생성이 되고, 함수가 동작을 완료하면 해당 Functional Context는 소멸합니다 
• 추가적으로 Closure 를 사용하게 된다면 스코프가 소멸하지 않고 계속 저장이 가능합니다.
• 모든 함수는 각각의 Functional Context 를 가지지만, 함수가 실행 되어야만 생성이 됩니다.

클로저의 개념은 다음 포스트 참고

https://yn971106.tistory.com/113

[JavaScript]_Closure (클로저)

---

실행 컨텍스트의 2가지 페이즈

1. Creation Phase (Execution Context 에 대한 정의) < 

2. Execution phase (코드 실행 과정)

 

두가지 중 1번 단계에 대해서만 알아보겠습니다.

 

---

Creation Phase - 실행 컨텍스트의 3가지 객체

 

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이지만,

실행 컨텍스트가 활성화 될 시점 ( 자바스크립트 코드가 실행되는 기준 ) 에

물리적으로는 객체의 형태를 가지며 이는 3가지가 있습니다.

 

1. LexicalEnvironment (어휘 환경)

 

2. VariableEnvironment (변수 환경)

 

3. this 값 설정

 

LexicalEnvironment  와 VariableEnvironment  란?

https://262.ecma-international.org/6.0

번역 - 처음 Execution context 가 실행 될 때 초기에는 변수환경과 어휘환경이 동일하게 생성된다.

 

 LexicalEnvironment에는 environmentRecord(환경 레코드) 와 outerEnvironmentReference 로 구성되어 있다.

따라서 VariableEnvironment 에도 동일하게 생성된다.

 

그럼 다른것이 무엇일까요?

https://262.ecma-international.org/6.0

VariableEnvironment  실행 컨텍스트 내 에 코드가 만든 식별자 참조를 해결하는데 사용

LexicalEnvironment  : 실행 컨텍스트 내 VariableStatements 에 의해 생성된 EnvironmentRecord 가 바인딩을 홀딩한 경우

 

번역으로만 보면 무슨 말인지 이해하기가 너무 어렵습니다.

 

이 둘을 나눈 이유는

LexicalEnvironment  에서 environmentRecord(환경 레코드) 의 생성 차이라고 보면 되겠습니다.

---

 LexicalEnvironment  와 VariableEnvironment 의 environmentRecord 생성 차이점

첫번째로는 var 와 let,const 의 스코프 차이입니다.

 

3가지 차이점은 다음 포스트 참고

https://yn971106.tistory.com/171

[ES6]_var 와 let,const 의 차이

 

var 와 let &const 의 차이점에서 알수 있지만

var 의 경우 스코프가 function scope 이고

let & const 의 스코프는 block scope 입니다.

 

만약 LexicalEnvironment  만 있었다면 한 함수안에 여러 블록이 생긴다면 그 함수의 실행컨텍스트에는 여러

LexicalEnvironment  가 생겨야 하기 때문에 이를 구분지었습니다.

 

두번째로는 var 와 let & const 가 생성되는 과정 (TDZ : Temporal Dead Zone)

 

자바스크립트에서 변수가 생성되는 과정은 다음과 같습니다.

 

1. Declaration phase (선언) : 변수를 Execution Context 의 Lexical Environment 에 등록

2. Initialization phase (초기화) : Lexical Environment에 등록되어 있는 변수를 위해 메모리 할당 단계, 여기서 변수는 undefined 로 초기화

3. Assignment phase(할당) : 변수에 실제로 값이 할당되는 단계

 

호이스팅은 1번 과정에 의해서 일어납니다.

 

Var 만 호이스팅 되는것이 아니라

let & Const 도 1번 과정을 바로 거치기 때문에 호이스팅이 된다.

 

Var 의 호이스팅으로 인한 디버깅 문제는 Var 의 경우 1번과 2번이 동시에 일어나기 때문입니다.

 

반대로

 

Let 에서 선언되지 않았는데 변수에 접근시 발생하는 오류는 T2번이 진행되지 않아 초깃값을 할당받지 못한 변수에 접근하여 TDZ에 위배되었기 때문입니다.

 

위 두가지 이유로 VariableEnvironment  와 LexicalEnvironment  를 분리하였고 각각 맡은 변수 선언은 다음과 같습니다

 

VariableEnvironment  에서는 var 로 선언된 변수를 선언합니다. 1단계 2단계를 모두 진행하기 때문에 메모리에 매핑되고 undefined 로 초기화합니다.

 

LexicalEnvironment  에서는 let 과 const로 선언된 변수를 1단계 까지만 진행합니다.

---

이렇게 Execution Context 에 대해 알아보았습니다.

 

틀린점이 있다면 댓글로 알려주시면 감사하겠습니다.

 

감사합니다.