🔎 실행 컨텍스트와 콜 스택
자바스크립트의 동작 과정은 간단히 아래와 같이 요약할 수 있다.
- 코드를 훑으며 함수를 만나면 실행 컨텍스트를 생성한다.
- 생성한 컨텍스트 안에 해당 코드에 대한 식별자 정보, 선언 위치, 외부 환경 정보를 수집해서 넣는다.
(이 과정에서 코드가 실행되지 않아도 변수, 함수명을 알 수 있다.) - 실행 컨텍스트를 콜스택 에 쌓아둔다.
여기에서 실행 컨텍스트와 콜스택은 무엇일까?
실행 컨텍스트 (Execution Context)
간단히 말하면 실행할 코드에 제공할 환경 정보를 모아둔 객체라고 할 수 있다.
자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 해당 컨텍스트를 콜스택에 쌓아둔다.
이러한 실행 컨텍스트를 생성하기 가장 좋은 방법은 함수를 만들어주는 것이다.
실행 컨텍스트는 두 종류로 나누어지는데 전역 컨텍스트와 함수 컨텍스트가 있다.
-
전역 컨텍스트: 특정 함수가 실행되지 않는 한 전역 컨텍스트에서 실행된다.
여기서 변수 객체를 생성하는 대신 this를 전역 객체(global object)를 활용하며 아무런 코드가 없어도 두 가지 요소를 가진다. (global object & this(브라우저: Window, Node: global)) -
함수 컨텍스트: 함수가 실행될 때마다 실행 컨텍스트가 생성되어 스택에 쌓였다가, 함수가 동작을 다하면 콜스택에서 삭제된다.
콜스택(CallStack)
자바스크립트의 엔진은 생성된 Context를 관리하는 목적의 CallStack(호출스택)을 갖고 있다. 자바스크립트는 단일 스레드 형식이기 때문에 런타임에 단 하나의 Call Stack이 존재하고 자바스크립트의 엔진은 전역 범위의 코드를 실행하며 전역 컨텍스트를 생성해 stack에 push(추가)한다.
그리고 함수가 실행 또는 종료 될 때마다 전역 컨텍스트의 위로 함수 컨텍스트를 push(추가), pop(제거)한다.
콜스택은 최대 스택 사이즈가 정해져있는데 콜스택에 쌓인 Context Stack이 최대치를 넘게 될 경우 ‘RangeError: Maximum call stack size exceeded’라는 에러가 발생한다. 이 에러는 Stack Overflow 라고 부르기도 한다.
🔎 변수의 은닉화
클로저(Closure)
변수의 은닉화를 알기 위해서는 클로저(Closure)를 짚고 가야할 필요성이 있다.
클로저는 생성될 당시의 환경을 기억하는 함수를 말한다.
환경이라 함은 스코프체인 자체를 말하는데, 스코프체인을 통해 접근할 수 있는 변수나 함수가 스코프가 해제되어야 할 시점에도 사라지지 않는다는 말이다.
이런 스코프는 객체가 갖는 성질인 캡슐화와 은닉화를 구현하는데 사용될 수 있다. 클로저가 생성 되면서 스테이트를 포함한 행위 를 묶을 수 있게 되는데 이렇게 묶여 있는 클로저를 객체를 생성하는 또 다른 방법이라고 생각할 수 있다.
클로저는 컨텍스트를 this로 접근하는 객체와는 다르게 컨텍스트를 스코프로 접근하는 객체인 것이다.
자바스크립트의 모든 객체는 프로퍼티들의 외부 접근이 모두 허용되는데 클로저 외에는 차단할 방법이 전혀 없다.
그래서 자바스크립트로 무언가를 개발할 때는 객체와 클로저를 적절히 혼용해서 사용하게 된다. 객체 리터럴로 객체를 생성하면서 클로저를 조합하면 자바스크립트에는 존재하지 않는 접근제한자를 흉내 낼 수가 있기 때문이다.
클로저를 두고 객체라고 정의한다면 당연히 무리가 따르겠지만 캡슐화와 은닉화를 구현하는 또 다른 방법이라고 클로저를 이해한다면 조금 더 쉽게 접근할 수 있다.
클로저와 객체를 잘 조합하면 자바스크립트만의 장점을 살린 객체지향 프로그래밍을 구현할 수 있다.
😢 Closure 부분은 깊게 공부해야 할 부분들이 많아서 온전히 이해하기가 어려웠다. 이번 챕터는 호이스팅과 실행 컨텍스트, 콜 스택. 모든 것이 얽혀 있어 하나하나 제대로 이해를 해야 모든 걸 이해할 수 있을 것 같다.
지금은 어렴풋하게 감만 잡는 정도라 시간을 더 내어 하나씩 관련 자료들을 읽어보고 이해해야겠다.
