실행컨텍스트(Execution context) 및 콜스텍

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

 

실행컨텍스트

실행컨텍스트란 실행가능한 코드가 실행되기 위해 필요한 환경이다.

자바스크립트 엔진은 코드를 실행하기 위해 다음과 같은 정보를 알고 있어야 한다.

 

  변수객체

  (전역변수, 지역변수, 매개변수, 인수, 함수선언)

 

  스코프 체인

 

  this

 

 

 

콜스텍에 전역 컨텍스트 생성 후, 함수 호출 시마다 컨텍스트가 생성된다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다. 함수 실행이 마무리 되면 해당 컨텍스트는 사라진다.

 

구체적인 예시를 통해 살펴보자.

왼쪽의 코드를 실행하면 오른쪽의 실행컨텍스트 스택을 생성하고 소멸한다. 실행컨텍스트가 쌓이는 이곳을 콜스텍(호출스택)이라고 부른다.

먼저 전역컨텍스트를 생성한다. 이 전역 컨텍스트는 다음과 같은 함수 구조를 가진다.

foo함수를 호출시, foo함수컨텍스트를 생성한다. 이 함수컨텍스트는 다음과 같은 구조를 가진다.

bar 함수 호출 시 함수컨텍스트를 생성한다. 이 함수컨텍스트는 다음과 같은 구조를 가진다.

bar에서 console.log(x + y + z)가 실행된다. 먼저 bar컨텍스트 안에서 x, y, z변수를 찾는다. x, y는 찾을 수 없으므로 scope chain을 타고올라가 foo변수객체에서 변수를 찾는다. x를 찾을 수 없으므로 다시한번 scope chain을 타고 올라가 전역컨텍스트에서 변수 x를 찾는다. 모든 변수를 찾았으므로 console에 출력한다. 

 bar 함수 종료 후 bar 함수컨텍스트가 사라지고, foo 함수의 실행이 마무리 된다. foo 컨텍스트도 사라지고, 마지막으로 전역컨텍스트도 사라진다.

 

 

클로저

클로저함수를 실행컨텍스트의 관점에서 살펴보자.

먼저 전역컨텍스트를 생성하고, increase 함수 호출 시 increase 컨텍스트를 생성한다.

increase 함수 호출 시, increase 함수는 익명함수(클로저함수)를 반환한다. (그리고 increase 컨텍스트는 사라진다.)

여기서 주의할 점은 클로저함수의 컨텍스트가 어떻게 형성되는가이다. 이 클로저함수의 스코프체인은 렉시컬 스코핑에 따라 increase변수객체와 전역변수객체를 포함한다. 따라서 클로저함수를 호출 할 때의 컨텍스트는 다음과 같다.

 increase 컨텍스트는 이미 사라졌을지라도, 클로저컨텍스트가 위와같은 scopeChain을 가지므로 변수 counter에 접근할 수 있다. counter는 클로저함수의 매개변수도 아니고, 내부에서 생성한 변수도 아니다. 그러므로 외부에서 counter에 접근할 수 있는 방법이 없다. 이러한 변수를 비공개변수라한다. 

클로저함수의 장점은 정보의 은닉이다. 사용자는 비공개 변수에 접근하지 못하므로 마음대로 변경할 수 없다.

단점은 잘못 사용했을 시 성능문제와 메모리 문제가 발생할 수 있다는 거시다. 클로저의 비공개변수는 자칫하면 메모리 낭비로도 이어질 수 있다. 또한 스코프체인을 거슬러 올라가기 때문에 조금 느리다.

 

참고
- https://poiemaweb.com/js-execution-context
- https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0