실행 컨텍스트를 모르고 JS를 쓰는 것은 무슨 의미가 있겠는가

서론

실행 컨텍스트(EC)를 배우며 ‘이걸 모르고 JS를 쓰는 것은 무슨 의미가 있겠는가’라는 생각이 들었다.
사실 EC를 모를때는 평화로웠다(?).
‘그냥 코드 한줄 한줄 콜스택에서 실행되고, 힙 영역에 데이터가 존재해서 가져다가 쓰는구나~’ 라고 생각했다.
하지만 EC를 배우고 나니, JS가 어떻게 동작하고, 호이스팅, 스코프 등 모든 과정이 어떻게 이루어지는지 알게 되었다.

실행 컨텍스트가 뭔데?

기술 면접에 대답하기 위해 명확한 정의가 궁금했고, 구글링과 실행 컨텍스트는 JS 코드가 실행되는 환경으로 코드를 읽고 실행할때 필요한 정보들의 모음 이라고 정의할 수 있다.

아래의 내용을 이해하기에 도움이 될만한 사이트이다. 해당 사이트에서는 코드를 직접 입력하고, 그 코드가 실행 컨텍스트가 어떻게 구성되어있고, 생성되는 과정에 대해서 순서대로 확인해볼 수 있다.

실행 컨텍스트의 구성

이놈은 구성도 애매하다. 모던 자바스크립트 딥다이브의 소개와 구글링 결과랑을 많은 차이가 있었고, 정말 딥하게 알고 싶었기 때문에 명확한 구성을 찾아보았다.

결론적으로 실행 컨텍스트는 3가지 컴포넌트로 구성되어 있다. 딥다이브 교재에는 Variable Environment 와 Lexical Environment 를 같이 다루기에 어려움이 많았고, 구글링을 통해 다른점을 찾게 되었다. 이 부분은 깊게 다룰 필요는 없다고 생각하니, 지루하다면 그냥 보고 넘어가도 좋을 것 같다. ~~요 부분은 수정이 예상된다..~~

1.Variable Environment

var 키워드로 선언된 변수가 저장된다.
아우터는 상위 실행 컨텍스트를 가리킨다.

2.Lexical Environment

let, const 키워드로 선언된 변수가 저장된다.
아우터는 Variable Environment를 가리킨다.

3.This Binding

this 식별자가 바인딩 되는 곳이다.
정말 중요한 것이라 알겠지만 this는 함수를 호출할 때 결정된다.

실행 컨텍스트의 종류

실행 컨텍스트는 어떤 코드인지에 따라 다르게 생성되고, 종류는 크게 4가지가 있다. 눈여겨 봐야할 녀석들은 전역 코드, 함수 코드 이다.

1.전역 코드

전역 코드는 전역 컨텍스트 라고도 불리며, 최상위 스코프를 가진다.
var 키워드로 선언된 변수 와 함수 선언문으로 선언된 함수 는 전역 객체의 프로퍼티가 된다.
전역 객체는 브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체를 가리킨다.

2.함수 코드

함수 코드는 지역 스코프를 생성하고, 지역 변수, 매개변수, arguments 객체를 생성하고 관리한다.
특히 arguments 객체는 다른 종류에는 없는 특별한 객체이다.

3.eval 코드

보안상의 이슈로 문제가 있고, 사용을 권장하지 않는다고 한다.

4.모듈 코드

모듈은 모듈별로 독립적인 스코프를 가지고 있다고 한다.
모듈에 대한 깊은 이해도가 있지 않고, 현재 실행 컨텍스트를 이해하는데 크게 중요하지 않은 부분이라고 생각한다.

실행 컨텍스트의 과정

실행 컨텍스트는 생성(평가) 단계와 실행 단계로 나뉜다. 호이스팅, 스코프, this 바인딩 등이 등장하고, 꽤나 중요한 부분이다.

1.생성 단계(Creation Phase)

모던 JS 딥다이브에는 평가 단계라고 정의하는 것 같다.
빈 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경레코드)에 등록한다.
즉, 우리가 아는 그 호이스팅 이 일어난다..! ~~출생의 비밀을 알아버렸다..~~
외부 참조 또한 생성 단계에서 이루어지는데 이때 스코프 체인 이 생성된다.
this 바인딩 도 이 시점에서 이루어진다.

2.실행 단계(Execution Phase)

생성 단계가 끝나면 선언문을 제외한 코드가 순차적으로 실행된다. 즉, 런타임 이 시작된다.
런타임이 진행되면서 필요한 정보(변수나 함수의 참조)를 렉시컬 환경에서 찾아서 사용한다.
런타임이 끝나면 실행 컨텍스트는 삭제된다.

배움에 있어 의문점들

1.블록 스코프에도 실행 컨텍스트(EC)가 생기는가?

결론부터 이야기하자면 if, for, while 등의 제어문은 실행 컨텍스트를 생성하지 않고, 렉시컬 환경만 생성 한다.
ECMA 명세서의 내용을 보면 EC는 생성하지 않고 상위 EC를 사용하고, 블록 스코프만의 렉시컬 환경을 별도로 생성한 후 EC가 블록 스코프의 렉시컬 환경을 참조하게 하고, 종료된 시점에 원래의 렉시컬 환경으로 복구한다고 한다.

2.실행 컨텍스트는 도대체 언제 콜스택에 쌓이는가?

실행 컨텍스트는 함수가 호출되어 실행 컨텍스트가 생성되는 시점 에 콜스택에 쌓인다.
즉, 실행 컨텍스트의 생성 단계를 거치고, 실행 단계가 시작되는 시점에 콜스택에 쌓인다.

결론

허겁지겁 프로젝트를 달리면서 알고 쓰는 것에 대한 결핍이 있었는데, 이번 실행 컨텍스트를 배우며 뭔가 시원함을 느꼈다. 공부에 대한 큰 터닝 포인트가 된 느낌이고, 앞으로 아는 것에 대한 의심을 가지고 공부할 것 같다.

Reference

모던 자바스트립트 Deep Dive
개발자 황준일님 블로그