자바스크립트 공부를 시작할 때 부터, 실행 컨텍스트는 자바스크립트의 모든것을 담고 있다고 해서 항상 무엇인지 궁금했다. 이번 포스팅은 실행 컨텍스트에 대해 정리한다.

본 포스팅은 이웅모님의 모던 자바스크립트 deep dive 19장을 참조하여 작성 하였습니다.

실행 컨텍스트란?

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다.

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

소스코드의 타입

이 책에서는 소스코드를 4가지로 분류한다. 분류 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이다.

• 전역 코드 : 전역 영역에 존재하는 코드
• 함수 코드 : 함수 내에 존재하는 코드
• Eval 코드 : eval 함수로 실행되는 코드
• 모듈 코드 : 모듈 내부에 존재하는 소스코드

이 포스팅에서는 전역코드와 함수 코드에 대해서만 살펴본다.

전역코드

전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. 그리고 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다.

전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.

함수 코드

함수 코드는 지역 스코드를 생성하고 지역 변수, 매개변수 ,arguments 객체를 관리해야 한다. 그리고 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 한다.

함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.

모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 평가란 쉽게 말해서 자바스크립트 엔진이 실행 전에 슥~ 훑으며 실행하기 위해 필요한 작업을 진행하는 것을 말한다.

모든 코드는 "평가" → "실행"의 순서로 이어진다!!

다음 코드를 살펴보자.

위 코드의 실행은 다음과 같은 과정을 거쳐 이루어진다.

1. 전역 코드 평가

   소스코드 평가 과정에서는 선언문만 먼저 실행한다(undefined로 초기화). var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 된다.

2. 전역 코드 실행

   전역 코드 평가 과정이 끝나면 런타임이 시작되어 전역 코드가 순차적으로 실행되기 시작한다. 이때 전역 변수에 값이 할당되고 함수가 호출된다. 함수가 호출되면 순차적으로 실행되던 전역 코드의 실행을 일시 중단하고 코드 실행순서를 변경하여 함수 내부로 진입한다.

   즉 , foo(100)을 만나면 전역코드 실행을 멈추고 foo 함수를 평가하기 시작한다.

3. 함수 코드 평가

   마찬가지로 함수 블록 내부에서 매개변수와 지역변수를 먼저 선언문을 실행하고, 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록된다. 또한 argument 객체를 생성하고 this 바인딩을 결정한다.

4. 함수 코드 실행

   함수 코드를 순차적으로 실행하기 시작한다. 이때 console.log를 만나면 식별자인 console을 스코프 체인을 통해 검색한다. 이를 위해 함수 코드의 지역 스코프는 상위 스코프인 전역 스코프와 연결되어야 한다.(console은 global 함수의 property임)

💡 여기서 우리는 변수 호이스팅의 원리에 대해서 알 수 있다. 코드가 실행되기 전 평가되는 과정에서 변수는 이미 생성되는 것이다!

위 코드의 실행 과정을 보며 알 수 있 듯이, 코드가 실행되기 위해서는 스코프, 식별자, 코드 실행 순서등의 관리가 필요하다.

이 모든것을 관리하는 것이 바로 실행 컨텍스트다. 실행 컨텍스트는 식별자(변수, 함수, 클래스)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

실행 컨텍스트

그렇다면 실행 컨텍스트는 어떻게 이루어져 있고 언제 생성되는 것일까?

실행 컨텍스트는 크게 두가지 요소로 정리할 수 있다.

1. 코드 실행 순서를 관리하는 실행 컨텍스트 스택
2. 식별자와 스코프를 관리하는 렉시컬 환경

실행 컨텍스트 스택

실행 컨텍스트 스택은 말 그대로 코드의 실행 순서를 관리하는 스택(stack)이다.

위 코드를 보자. 앞서 말했듯, 모든 코드는 평가를 거쳐 실행된다. 따라서 위 코드는 다음과 같은 단계를 거쳐 실행된다.

전역 코드의 평가와 실행 → foo 함수 코드의 평가와 실행 → bar 함수 코드의 평가와 실행 → foo 함수 코드로 복귀 → 전역 코드로 복귀

각 과정에서 실행컨텍스트 스택을 보면 다음과 같다.

함수가 호출될 때 마다, 실행 컨텍스트가 하나씩 생성되어 스택에 쌓인다.

즉, 실행 컨텍스트 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트이고, 각각의 실행 컨텍스트는 렉시컬 환경을 가진다.

렉시컬 환경

실행 컨텍스트 스택의 코드의 실행 순서를 관리한다면 렉시컬 환경은 스코프와 식별자를 관리한다.

렉시컬 환경은 다음과 같은 두개의 컴포넌트로 구성된다.

1. EnvironmentRecord(환경레코드)

   스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딘됭 값을 관리하는 저장소이다. 쉽게 말하면 렉시컬 환경은 각 실행 컨텍스트 마다 존재하며 그 실행 컨텍스트에서 변수와 this등을 관리한다.

2. OuterLexicalEnvironmentReference(외부 렉시컬 환경에 대한 참조)

   상위 스코프 참조를 위해 있는 컴포넌트이다. 이를 통해서 상위 스코프를 참조할 수 있기 때문에 스코프 체인이 형성되고, 식별자를 검색 가능하다!

내용이 길었는데, 마지막으로 정리해보자.

함수가 실행되면 실행 컨텍스트에 새로운 스택이 쌓이고, 각각의 실행 컨텍스트는 렉시컬 환경을 가지고 있다.
렉시컬 환경은 그 실행 컨텍스트의 변수에 대한 정보와 상위 스코프에 대한 정보, this 바인딩 정보를 가지고 있다.

---

자바스크립트 deep dive 👍

이 책은 말 그대로 자바스크립트의 매력에 깊게 빠지게 해주는 책인 것 같다. 처음 읽었을때 잘 이해가 안되어서, 집중해서 세번 정도 읽었더니 앞에서 공부했던 변수 hoisting, scope chain이 왜 발생하는지 이해할 수 있었다.

자바스크립트를 깊게 공부하고 싶은 분이 있다면 꼭 읽는것을 추천드린다.