자바스크립트 JavaScript : 실행 컨텍스트(Execution Context)

선행지식

자바스크립트의 실행 컨텍스트를 설명하기 앞서 자바스크립트의 몇가지 특성을 함께 이해하고 있으면 실행 컨텍스트에 대해서 비교적 쉽게 이해할 수 있는데요.

 

1. 자바스크립트의 특성

우선 자바스크립트는 '싱글 스레드' 언어이며 '동기적'으로 실행되는 언어 입니다.

 

이게 무슨 의미이냐면

 

싱글 스레드(single Thread): 하나의 프로세스에서 오직 하나의 스레드로만 실행한다
동기(Synchronous): 순차적/직렬적으로 작업을 수행한다.

(참고)
프로세스(Process) :프로그램이 메모리 상에서 실행될 때 작업의 단위
스레드(Thread) :프로세스가 할당 받은 자원을 이용하는 실행의 단위

 

쉽게 말하자면 자바스크립트는 한 번에 하나의 일만 순차적으로 수행할 수 언어를 말합니다.

 

이를 설명한 이유는 자바스크립트는 실행될 때, 콜 스택이라는 싱글 스레드에 실행 컨텍스트가 쌓이고 위에서 부터 순차적으로 코드가 실행 됩니다.

 

사실 몇몇 분들은 자바스크립트는 싱글 스레드 언어인데 병렬 처리가 가능하지 않나? 라는 의문을 가질 수 있지만 이는 Wep API 가 있어서 가능한 일이라서 이는 '브라우저 동작 원리'에 대해 알아보시면 의문점을 해결하실 수 있으실 겁니다.(추후에 브라우저 동작 원리에 대해 정리할 예정)

 

사담은 여기까지 하고 본격적으로 실행 컨텍스트에 대해 들어가기 전 기억해주실 점은 

자바스크립트는 ' 싱글 스레드' 언어이며 '동기적'으로 실행되는 언어 이며

 

그리고

2. 렉시컬 환경(Lexical environment) 

렉시컬 환경(Lexical environment) 입니다.

렉시컬 환경은 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체이며

1. 스크립트 전체
2. 코드블록 {...}
3. 호출된 함수

등의 정보를 담고 있습니다.

이러한 렉시컬 환경은 환경레코드(Evironment record): 변수와 값 그리고 외부 환경 레코드(Outer Evironment record) : 위쪽 변수 로 구성 됩니다.

또한 렉시컬 환경은 함수가 호출될 때가 아닌 함수가 선언될때 결정됩니다.

 

이정도 선행 지식은 가지시면 비교적 쉽게 실행 컨텍스트를 이해하실 수 있으실 겁니다.

 

실행 컨텍스트(Execution Context) 란?

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

 

실행 컨텍스트의 구조

 

실행 컨텍스트의 구조는 다양하고 복잡하지만 이중에서 크게 Lexical Environment 와 Variable Environment 두가지를 통해 실행 컨텍스트의 구조를 설명하겠습니다.

 

Lexical Environment는 실행 컨텍스트 내부에서 선언된 변수정보 + 외부환경 정보를 저장하고 있으며

(let,const, 함수 표현식) 선언 ▶ 초기화 ▶ 할당 됩니다

 

 Variable Environment는 실행 컨텍스트 내부에서 선언된 변수정보 +  외부환경 정보를 저장하고 있으며

(Var, 함수 선언문) 선언 및 초기화  ▶ 할당 의 됩니다

 

둘의 차이점은 Variable Environment는 선언과 초기화가 동시에 일어난다는 점입니다.

즉, 변수 생성 과정을 달리합니다.

이는 자바스크립트 호이스팅과도 밀접한 관계가 있는데요.
let,const, 함수 표현식은 호이스팅 시, 선언문을 환경 레코드에 저장하지만 값을 초기화 해주지 않기 때문에 레퍼런스 에러 혹은 타입 에러를 출력합니다.
Var, 함수 선언문는 반대로 호이스팅 시, Var 변수는 초기 값으로 undefined를 할당하며, 함수 선언문은 함수를 값으로 초기화하여 저장하기 때문입니다.

 

그리고 Lexical Environment는 Outer Environment Reference 와 Environment Record로 이루어져 있는데,

• Outer Environment Reference 는 자신이 아닌 외부의 Lexical Environment를 참조
• Environment Record는 변수와 함수의 식별자 관리, 해당 식별자에 바인딩된 값을 관리

또 이어서 Environment Record는 3가지로 이루어져 있습니다.

• Object Evironment Record : 전역객체를 참조
• This binding : Javascript의 this 값 참조
• Declarative Environment Reference : 변수와 함수의 식별자와 값을 저장

자바스크립트 동작원리

앞서 자바스크립트는 '싱글 스레드' 언어이며 '동기적'으로 실행되는 언어 라고 설명 드렸는데요.

실행 컨텍스트를 이해하기 위해서는 자바스크립트 동작원리에 대해 이해할 필요가 있습니다.

 

먼저 위의 그림을 통해 자바스크립트 동작원리에 대해 설명드리겠습니다.

• 콜스택에 자바스크립트가 처리해야할 함수를 스택에서 위에서 부터 하나씩 제거하며 실행해 갑니다.
• 힙에서는 동적으로 생성된 변수를 저장하는 역할을 합니다.
• Wep Apis 에서는 setTimeout와 AJAX, 이벤트 핸들러 등 Wep Apis에서 제공하는 기능들을 Callback Queue에 전달하고 Event Loop에 의해 콜 스택이 비워지면 Callback Queue에 있는 함수들을 콜스택에 보내준 뒤 콜스택에서 실행하여 제거합니다.( 이러한 원리 때문에 저희가 비동지적으로 자바스크립트를 수행할 수 있게 됩니다.

실행 컨텍스트 진행과정

실행 컨텍스트는 3가지가 있습니다.

• 전역 실행 컨텍스트(Global execution context): this object, window object
• 함수 실행 컨텍스트(Function execution context) : 함수선언, 매개변수, 변수
• Eval execution context

실행 컨텍스트는 Creation phase 생성단계와 Execution phase 실행단계로 나누어져서 만들어 집니다.

 

먼저 생성단계에서는 전역 실행 컨텍스트와 함수 실행 컨텍스트, this 가 형성됩니다.

- 이때, Scopechain(outer scope 참조 : 변수 쉐도잉 발생) 이 때문에 호이스팅이 가능.

- 값이 들어가 있지 않은 초기화 시켜줍니다.

 

그 다음 실행단계가 실행됩니다.

실행단계에서는 값이 할당되고 This는 함수호출패턴 또는 렉시컬 환경에 따라 값이 정해집니다.

function func1() {
    function func2() {
        console.log('func2 호출');
    }
    func2();
    console.log('func1 호출');
}
func1();

 

위 예제를 통해서 콜 스택에 실행 컨텍스트(Execution Context)가 쌓이는 과정을 그림으로 살펴보겠습니다.

 

처음 자바스크립트 코드를 실행하는 순간 사진의 step 1 처럼 전역 컨텍스트가 콜스택에 담기면

코드가 실행되면서 func1 함수를 만나면 func1의 환경 정보를 담은 함수 컨텍스트가 생성되어 콜스택에 쌓입니다. 그리고 func2를 만나면 func2의 함수 컨텍스트가 그 위에 쌓이겠죠.

 

func2의 코드 실행이 완료되면 func2의 함수 컨텍스트가 콜 스택에서 사라지고 func1의 코드가 마저 실행됩니다. 이후에 func1의 함수 컨텍스트도 콜 스택에서 사라지고 전역 컨텍스트에서의 코드가 마저 실행됩니다. 페이지가 종료되면 전역 컨텍스트도 사라지게 됩니다.