실행 컨텍스트(Execution Context)에 대해서

해당 글은, 코어 자바스크립트를 보고 제가 정리한 내용입니다. 좀 더 자세한 내용을 원하시는 분들은 코어 자바스크립트 책을 구매하셔서 보시면 더 많이 이해를 하실 수 있습니다.

---

실행 컨텍스트란(Execution Context)? 무엇인가?

실행 컨텍스트에 담기는 내용들을 먼저 설명해 보겠습니다.

첫 번째로, Variable Environment입니다. Variable Environment는 현재 실행한 함수의 초기 값들이 스냅샷 형태로 저장되어 있는 것을 의미합니다. 초기값이라는 것은 좀 추상적이니까 풀어서 얘기해 보자면, 매개변수, 변수, 함수명 등등이 포함이 됩니다. 이 부분의 특징은 처음 선언된 상태 그대로 유지가 된다는 것이 특징 중에 하나입니다.

두 번째로, Lexical Environment인데. Variable Environment와 똑같습니다. 근데, 실시간으로 할당된 값이 변경되면 Lexical Environment에서도 변경이 된다는 것이 차이점이라고 볼 수 있습니다. 이 부분은 Variable Environment와의 차이점입니다.

세 번째로, This Binding이 결정이 되는데요. 이 부분은 후에 This 파트에서 좀 더 자세하게 알아보도록 하겠습니다.

실행컨텍스트란 무엇인지 말하겠습니다. 실행 컨텍스트란 코드가 실행되는 환경을 정의하고, 코드가 호출될 때마다 생성됩니다.

---

Variable, Lexical 둘 중 누가 먼저 생성되나?

Variable과 Lexical중에 둘 중 먼저 생성되는 것은 Varable입니다. (둘은 동시에 생성된다고 합니다. 책에서는 Variable이 먼저 생성된다고 했던거 같은데, 다시 한 번 알아봐야할 것 같습니다.)실행 컨텍스트가 생성되었을 때 Variable에 정보를 먼저 담고, 이를 그대로 복사해서 Lexical Environment를 만들어 Lexical을 실시간 반영에 사용되게 됩니다.

---

Hositing

Variable이랑 Lexical을 좀 더 자세하게 살펴볼 필요가 있습니다. 여기에서 등장하는 개념들은 자바스크립트를 이해하기 위해서 매우 중요한 내용이라고 저는 생각을 합니다.

Outer Environment Reference, Environment Record 이렇게 두가지로 나뉘어서 값이 저장이 되는데요. 자바스크립트에서는 특이한 부분이 존재합니다. 호이스팅이라는 현상인데 이 현상은 Environment Record에 의해서 발생이 된다고 볼 수 있습니다.

Lexical Environment의 Environment Record에 매개변수, 변수, 함수명 등등이 담기게 되는데요. 그래서 실제로 해당 코드를 실행할 때, 이 Lexical Environment를 참조해서 변수의 값이나 함수를 파악하기 때문에 호이스팅과 같은 현상이 발생을 하게 됩니다.

참고로 호이스팅이란, 현재 변수가 선언된것이 아님에도 해당 변수를 console.log를 찍어보면 undefined가 나오게 되는 것을 의미합니다. 현재 var 선언에 대해서 설명드리는 것이기 때문에, let과 const에서는 Reference error가 나올 것입니다. 이 점 참고해 주시면 좋을 것 같습니다.

그래서 호이스팅이라는 것은, Lexical Environment가 해당 변수, 함수를 담고 있어서 함수가 호출되어 실행됐을 때 Lexical Environment를 참조해서 실행되기 때문에 발생하는 현상이라고 설명드릴 수 있는데요. 그래서 모든 변수가 사실상 위로 끌어져 올라와 있다고 말해도 다를 바가 없게 됩니다. 하지만 절재 자바스크립트 엔진이 물리적으로 코드를 옮기는 것은 아니고, 그거와 다를바가 없다는 의미입니다. 물론, var와 함수 선언문에서 발생되는 현상입니다.

---

Scope Chain

현재 함수에서는 a라는 변수가 존재하지 않지만, 실제로 사용이 가능합니다. 그것을 스코프 체인이라고 부르게 되는데요. 이것을 가능하게 하는 것도 실행컨텍스트의 Lexical Environment의 Outer Environment Reference가 됩니다. 

Outer는 현재 실행 컨텍스트가 생성되기 전 실행 컨텍스트를 참조하고 있습니다. 그래서 참조하고 있는 것을 바탕으로 스코프 체인을 진행할 수 있습니다. 그래서 외부에 있는 변수에 접근할 수 있게 됩니다. 그래서 실행 컨텍스트가 외부 실행 컨텍스트를 참조하는 형태로 이루어져 있어서, 만약 변수를 끝까지 찾지 못했다면 오류가 발생합니다. 

하지만, 전역 객체까지 전부 찾았을때 나온다면 그 값을 참조할 수 있습니다. 이런 것을 스코프 체인이라고 말씀드릴 수 있겠고, 이를 바탕으로 클로저(Closure)라는 현상도 발생됩니다.

---

틀린 내용

Variable Environment와 Lexical Environment의 생성 순서

• "Variable Environment가 먼저 생성된다."
  이 부분은 틀린 설명입니다. 실제로 실행 컨텍스트가 생성되면, Lexical Environment와 Variable Environment가 동시에 생성됩니다.
  • Variable Environment는 Lexical Environment의 스냅샷이 아니라, 둘 다 실행 컨텍스트 내에서 별도로 동작합니다.
  • Lexical Environment는 변수 값의 실시간 추적과 스코프 체인을 관리하며, 실행 시 주요 환경으로 사용됩니다.

Hoisting의 원인

• "Hoisting이 Lexical Environment의 Environment Record 때문에 발생한다."
  이는 부정확한 설명입니다.
  • Hoisting은 자바스크립트의 변수 선언 방식과 컴파일러 동작 원리에서 비롯됩니다.
  • JavaScript 엔진은 코드 실행 전 변수 선언부와 함수 선언부를 스코프의 최상단으로 이동시키기 때문입니다. (gpt도 문제가 많다. 이런 기본적인 내용을 틀리니 호이스팅이란 것은 물리적으로 코드의 변화를 주지 않는다. 실행컨텍스트에 변수, 함수, 매개변수등이 실려 올라가서 최상단에 선언된것 처럼 보이는 현상이다. 이건 틀린말 항상 GPT의 말에 신뢰를 가져선 안된다.)
  • Environment Record는 Hoisting의 결과를 참조할 뿐, 원인은 아닙니다.

---

애매한 내용

Variable Environment와 Lexical Environment의 차이

• 작성한 설명에서 Variable Environment와 Lexical Environment의 역할이 혼동될 수 있습니다.
  정확한 차이를 추가적으로 명확히 설명해야 합니다.
  • Variable Environment: 선언된 변수와 함수의 초기 상태만 저장. 실행 중 값 변화는 반영하지 않음.
  • Lexical Environment: 변수의 실시간 값과 스코프 체인을 관리.
    이 두 환경은 Lexical Environment 내부에서 분리된 기록으로 동작합니다.

This Binding

• This Binding의 설명이 간략히 언급되었지만, this 결정 방식(전역 컨텍스트, 함수 컨텍스트, 화살표 함수 등)에 따라 구체적 차이가 있음을 추가 설명하는 것이 좋습니다.

---

추가하면 더 탄탄해질 내용

Execution Context의 생성 과정

• 실행 컨텍스트의 생성 단계는 아래와 같은 흐름으로 이뤄집니다. 이를 추가하면 개념 이해에 도움이 됩니다:
  1. Creation Phase:
     • Lexical Environment와 Variable Environment가 생성되고 초기화됩니다.
     • this 바인딩 결정.
  2. Execution Phase:
     • 코드 실행. 값이 Lexical Environment에 저장되거나 변경됩니다.

Hoisting과 let/const 차이

• 작성 내용에서 var만 언급되었지만, let과 const는 Hoisting의 영향을 받지 않는다는 설명은 불완전합니다.
  • 사실 let과 const도 호이스팅되지만, Temporal Dead Zone(TDZ) 때문에 초기화 전에는 참조가 불가능합니다.
    이를 명확히 설명하면 글의 신뢰성이 높아질 것입니다.

Closure 설명

• 스코프 체인의 연장선으로, 클로저에 대한 추가 설명을 더하면 좋습니다.
  • 클로저는 Lexical Environment가 종료된 후에도 외부 변수를 참조할 수 있는 함수입니다.
  • 이를 통해 변수의 은닉화와 상태 유지 같은 고급 개념이 구현됩니다.