자바스크립트 실행 컨텍스트

실행 컨텍스트가 뭐야??

자바스크립트에서 실행 컨텍스트란 실행 가능한 코드를 형상화 하고 구분하는 추상적인 개념이라고 한다. 처음 이 말을 들어보면 좀 복잡할 것이다. 나도 그랬고 나는 내 나름대로 코드블럭이 실행되는 환경이라고 해석했다. 일반적으로는 함수와 전역 코드라고 생각하면 될 것 같다. 실행 컨텍스트를 공부하기 위해선 호출스택을 알아야 한다. 호출스택은 자바스크립트와 비동기 처리에 정리해 놓았다.

 

전역 실행 컨텍스트, 함수 실행 컨텍스트

컨텍스트에는 두가지 종류가 있다. 전역코드가 실행될때 만들어지는 컨텍스트가 전역 실행 컨텍스트이고 함수가 실행될 때 만들어지는 함수 실행 컨텍스트가 있다. 전역실행 컨텍스트와 함수 실행 컨텍스트가 다른 점은 전역 실행 컨텍스트가 가장 먼저 실행되고 가장 늦게 종료된다는 것과 전역 실행 컨텍스트의 변수객체란 것이 전역객체를 가리키고 함수 실행 컨텍스트의 변수객체는 활성 객체를 가리키고 있다는 것, 실행 컨텍스트 구성요소중 하나의 차이가 있다는 것이다. 그 구성요소의 차이는 아래에서 살펴보자.

 

실행 컨텍스트 생성 과정

다음과 같은 코드가 있을때의 전역 실행 컨텍스트의 생성 과정을 살펴보겠다.

var name = 'penguin';

function hello(param1) {
    var hello = 'hello';
    console.log(hello + param1);
}

hello(param1)

 

위에서 가장 먼저 실행되는 컨텍스트가 전역 실행 컨택스트라고 하였으니 전역실행 컨텍스트부터 살펴보자.

1. 전역 코드가 실행되면 전역 실행컨텍스트가 실행 컨텍스트의 스택에 쌓인다.

 

2. 현재 컨텍스트의 유효 범위를 나타내는 스코프의 정보 생성이 이루어진다. 이때 스코프 정보는 연결 리스트 유사한 형식으로 만들어진다. 이 리스트로 상위 실행 컨텍스트의 변수에 접근이 가능하다. 현재 생성된 활성 객체가 스코프 체인의 제일 앞에 추가된다.

 

3. 이 단계에서는 전역 변수의 생성이 이루어 진다. 전역 코드에 함수가 있다면 함수명이 전역객체의 프로퍼티로, 생성된 함수객체가 값으로 생성된다. 위의 코드로 따지면 hello가 프로퍼티가 되겠다. 생성된 함수객체는 스코프 프로퍼티를 가지게 된다. 이 프로퍼티는 현재 실행컨텍스트의 스코프(2번에서 만들었던거)가 참조하는 객체를 값으로 담는다. 이때 자신을 포함하는 외부 실행객체가 소멸해도 스코프 프로퍼티가 가리키는 외부함수의 실행환경은 참조할 수 있다. 이것이 클로저이다.

아직 hello 함수는 아직 실행되기 이전이다. 하지만 스코프 체인에서 가리키는 전역객체에 이미 함수가 등록되어 있으므로 이후 코드를 실행 할 때 함수 선언식 이전에 함수를 실행할 수 있게 되었다. 이것이 함수 호이스팅이다.

이후 전역객체의 변수가 생성되는데 이때 값은 undifined로 생성된다. 그 이유는 변수의 초기화는 표현식이 실행될 때 행해지기 때문이다.

 

4. 이 단계에서는 this의 바인딩이 결정된다. 전역 컨텍스트의 경우 this는 전역에 바인딩 된다.

 

이후 전역코드가 실행될 것이고 변수 name에 값이 할당될 것이다. 이후 hello함수의 실행 컨텍스트가 만들어질 것이다 함수 실행 컨텍스트의 과정은 다음과 같다.

 

1. 함수 코드가 실행되면 전역 실행 컨텍스트가 실행 컨텍스트 스택에 쌓인다.

 

2. 전역 컨텍스트와는 다르게 함수는 argument가 있기 때문에 argument의 초기화를 먼저 실행 한다.

 

3. 전역 컨텍스트와 마찬가지로 스코프 정보를 생성하는데 이때 caller의 스코프의 정보를 먼저 push한다. 그리고 현재 생성된 활성 객체가 스코프체인의 제일 앞에 추가된다.

 

4. 변수 생성 단계는 전역 컨텍스트와 같지만 다른 점이 있다면 전역 컨텍스트의 변수객체는 전역객체를 가리고 함수 컨텍스의 변수객체는 활성 객체를 가리키고 있다는 것이다.

 

5. 함수 호출 패턴에 따라 this가 바인딩 된다.

 

참고한 블로그 : https://poiemaweb.com/js-execution-context