javascript를 더 깊히 이해하기 위해 빨간 나비책도 읽고 여러 글을 읽는 와중에 확실한 이해를 위해 중요한 개념 몇가지는 글로 정리 해보면 좋을것 같다는 생각이 들어서 글을 써봅니다.

실행컨텍스트는 poiemaWeb의 글을 이전에 노션에 정리한것을 옮겨왔습니다. 현재 poimaWeb에 실행컨텍스트 관련글은 없어졌네요.

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리라고 합니다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것 같네요.

ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의합니다.. 좀 더 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠네요.

실행컨텍스트를 정리하다보니 외부 변수를 참조하는 javascript의 특이한 메커니즘이 이제 이해가 되네요. 개인적으로 코드의 '실행'과 '진입'을 구분하는것이 익숙하지 않았는데 코드를 작성하는 입장에서만 코드를 바라봤 지, 컴파일하고 스택에 호출 함수를 넣는 javascript 입장에서 코드를 보는 바라본적이 없어서 그런것 같네요. 신기한 경험이였습니다.

실행컨텍스트 생성 과정

반복되는 과정 :
1. 스코프 체인의 생성과 초기화
2. Variable Instantiation 변수 객체화 실행
3. this value 결정

전역코드 실행 > 전역코드 진입 > foo() 실행 > foo() 진입 > boo() 진입

1. 전역 코드에의 진입

1.1 스코프체인 생성 및 초기화

1.2 변수 객체화 실행 (Variable Instantiation) : (호이스팅)

1.2.1 함수 foo의 선언 처리

1.2.2 변수 x의 선언 처리

1.3 THIS value 결정

2. 전역 코드의 실행

2.1 변수 값의 할당

2.2 함수 foo의 진입

2.2.1 스코프체인의 생성과 초기화

2.2.2 Variable instantiation 실행

2.2.3 this value 결정

3. foo 함수 코드의 실행

3.1 변수 값의 할당

3.2 함수 bar의 실행