실행 컨텍스트와 콜 스택, 스코프 체인, 변수 은닉화

이번 포스팅은 주변 이해한 만큼만 간단하게 작성하고, 추후 내용을 추가하게 될 것 같다.

이전의 세 포스팅은 다른 포스팅이나 공식 문서를 읽고 이해가 어느 정도 가능했고, 이해한 내용을 바탕으로 작성한 반면, 이번 주제에 관한 내용은 이해가 잘 안되었기 때문이다.

 

1. 실행 컨텍스트(Execution Context)

실행할 코드에 제공할 환경 정보들을 모아놓은 객체
자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념

 - scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리를 말한다.

1-1. Global Execution Context

 - 자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성된다.

 - 생성 과정에서 전역 객체인 Window Object (Node는 Global)를 생성하고 this가 Window 객체를 가리키도록 한다.

1-2. Function Execution Context

 - 자바스크립트 엔진은 함수가 호출 될 때마다 호출 된 함수를 위한 Execution Context를 생성한다.

 - 모든 함수는 호출되는 시점에 자신만의 Execution Context를 가진다.

자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.

• 호이스팅이 발생한다(선언된 변수를 위로 끌어올린다.
• 외부 환경 정보를 구성한다
• this 값을 설정한다.

 

2. 콜 스택

코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조

엔진이 처음 script를 실행할 때, Global Execution Contxt를 생성하고 이를 Call Stack에 push한다.

이후 엔진이 함수를 호출 할 때마다 함수를 위한 Execution Contxt를 생성하고 이를 Call Stack에 push한다.

자바 스크립트 엔진은 Call Stack의 Top에 위치한 함수를 실행하며(LIFO; Last In First Out) 함수가 종료되면 stack에서 제거(pop)하고 제어를 다음 Top에 위치한 함수로 이동한다.

즉, 프로그램이 함수 호출을 추적할 때 사용한다.

 

3. 스코프 체인

일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.

실행 컨텍스트가 실행되면, 엔진이 스코프 체인을 통해 렉시컬 스코프를 먼저 파악한다.

함수가 중첩 상태일 때 하위 함수 내에서 상위 함수의 스코프와 전역 스코프까지 참조할 수 있는데 이것을 스코프 체인을 통해 탐색하는 것이다.

즉, 자기 자신의 스코프를 제외한 자신과 가장 가까운 변수 객체의 모든 스코프들을 스코프 체인이라 할 수 있다.

4. 변수 은닉화

직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라 한다.

객체의 private한 속성을 만들 수 없었던 자바스크립트에서는 몇 가지의 대안을 사용해왔다. 다른 클래스 기반의 언어처럼 근본적으로 private 하게 만들 수 없었기 때문에 _ 즉 언더스코어 프리픽스를 속성 명에 사용하여 관용적으로 많이 사용했다.

 TC39 private class field proposal 라는 새로운 방법을 통해 우리는 단순하게 #만 붙여도 private 기능을 구현할 수 있게 되었다.

#사용한 private 기능의 구현 예시라고 할 수 있다.

분명 p.getAge()와 p.getFakeAge()는 동일하게 this.#age에 접근하지만 결과 값이 다르다.

#age 즉 private 속성은 우리가 알고 있는 this의 그 컨텍스트와는 다른 방식으로 저장된다. 기존처럼 인스턴스별로 독립적인 공간을 갖지만, 추가로 클래스 별로 독립적인 공간을 갖는 것이다.

Human 클래스에 속한 getAge()가 실행될 때에는 Human 클래스에 속한 #age에 접근하고
Person의 getFakeAge()가 실행될 때에는 Person의 #age에 접근하는 것이다.
-> 모든 Private 필드는 소속된 클래스에 고유한 스코프를 갖는다.

 

== Reference ==

실행 컨텍스트

https://junilhwang.github.io/TIL/Javascript/Domain/Execution-Context/#_1-%E1%84%80%E1%85%A2%E1%84%82%E1%85%A7%E1%86%B7

자바스크립트 실행 컨텍스트 | 개발자 황준일

https://velog.io/@kirin/Execution-Context%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8

Execution Context(실행 컨텍스트)

 

콜 스택

https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79

Call Stack과 Execution Context 를 알아보자

 

스코프체인

https://ljtaek2.tistory.com/140

자바스크립트 - 스코프 체인(scope chain)란?

 

변수 은닉화

https://github.com/tc39/proposal-class-fields/

GitHub - tc39/proposal-class-fields: Orthogonally-informed combination of public and private fields proposals

https://meetup.toast.com/posts/228

은닉을 향한 자바스크립트의 여정 : NHN Cloud Meetup

https://frontdev.tistory.com/entry/JavaScript%EC%97%90%EC%84%9C-Priavate-%EB%B3%80%EC%88%98-%EA%B5%AC%ED%98%84

JavaScript에서 Priavate 구현