실행 컨텍스트 ( execution context ) 는 자바스크립트의 동작 원리를 담고 있는 핵심개념이다.
따라서 이것을 알면 자바스크립트가 어떻게 돌아가는지 알 수 있다.
실행 컨텍스트란?
= 실행 문맥
실행할 코드에 제공할 환경 정보들을 모아놓은 객체로서, 동일한 스코프에 있는 코드들을 실행할 때 필요한 환경 정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아서 실행 순서를 보장한다.
콜 스택 ( call stack )
실행문맥은 스택이라는 구조로 관리되는데, 스택이란 데이터를 아래에서 위로 쌓아올려 마지막으로 추가한 데이터를 먼저 꺼내는 후입 선출 방식으로 관리된다.
실행 가능한 코드
자바스크립트 엔진은 실행 가능한 코드 ( executable code ) 를 만나면 코드를 평가해 실행 문맥으로 만든다.
executable code 를 구분하는 이유는 실행 컨텍스트를 생성하는 과정과 내용이 다르기 때문이다.
- 전역 코드 : 전역 코드 평가. 전역스코프를 생성
- 함수 코드 : 함수 코드 평가. 지역스코프를 생성
함수가 실행될 때마다 실행 컨텍스트가 생성되고, 함수가 동작을 다하면 콜스택에서 삭제된다. - eval 코드 : eval 코드를 평가. strict mode에서 자신만의 독립적인 스코프를 생성
- 모듈 코드 : 모듈 코드 평가. 모듈별로 독립적인 모듈스코프를 생성
각 코드가 평가되면 해당하는 실행 컨텍스트가 생성된다.
코드의 평가와 실행
자바스크립트 엔진이 우리가 코드를 작성하면 실행에 앞서 평가 과정을 거친다.
즉 자바스크립트 엔진은 코드를 2가지과정, 평가 와 실행 과정으로 나누어 처리한다.
소스코드 평가 과정에서는, 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 환경레코드에 등록한다.
소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다.
즉, 런타임이 시작된다.
var person = 'sohyun';
const outer = function(){
var person2 = 'nayoung';
const inner = function(){
console.log(person);
console.log(person2);
}
inner();
console.log('print finish');
}
outer();
console.log('finish');
// sohyun
// nayoung
// print finish
// finish
전역 실행 컨텍스트가 생성되고 환경 레코드에 변수 person 과 함수 outer 가 기록된다.
outer( ); 로 outer함수를 호출하면 outer 실행 컨텍스트가 생성되고 환경 레코드에 변수 person2 와 함수 inner 가 기록된다.
inner( ); 로 inner함수를 호출하면 inner 실행 컨텍스트가 생성되고 console.log 를 실행한다.
( 따라서 함수를 호출할 때 해당 함수 실행 컨텍스트가 생성된다. ex) outer(); 시 outer 실행 컨텍스트가 생김 )
외부 렉시컬 환경 참조에는 전역 환경의 참조가 들어있다.
inner 함수가 호출이 되면 외부 렉시컬 환경 참조에는 outer 실핸 컨텍스트의 렉시컬 환경 참조가 들어있다.
외부 렉시컬 환경 참조라는 컴포넌트를 이용해서 전역 컨텍스트까지 계속 타고 올라가는 체인 모양의 형태가 형성되는데 그것을 스코프 체인 이라고 부른다.
스코프 체인이 있기 때문에 내부 함수에서 외부 함수의 변수에 접근 할 수 있는 것이다.
