[TIL] Execution context (실행 컨텍스트)

먼저 아래 영상을 보면 이해를 쉽고 빠르게 할 수 있다!

실행 컨텍스트

• 코드가 실행되는 공간
• 실행 컨텍스트의 Call stack에는, 환경 레코드, 첫 번째로 실행될 함수, 첫 번째 함수가 종료되기 전 실행할 함수 .. 순서로 stack으로 쌓이게 된다.
  • 후입선출 방식을 사용한다 => 나중에 실행되는 함수가 종료되어야만, 그 앞에 실행된 함수가 종료된다.
  • 따라서 나중에 실행되는 함수에서 변수를 먼저 찾고, 바깥으로 나가며 찾는 방식으로 진행이 된다.
  • 환경 레코드 : 실행 컨텍스트에 있는 변수들을 저장하는 공간

function greeting() {
  sayHi();
}
function sayHi() {
  return "Hi!";
}
greeting();

0. 시작 상태
   call stack : []
1. 위 코드에서, greeting()으로 greeting 함수가 실행된 뒤, call stack에는 greeting이 쌓이게 된다.
   call stack : [greeting]
2. greeting 내부의 sayHi()를 통해 sayHi 함수가 실행되어 call stack에 쌓이게 된다,
   call stack : [sayHi, greeting]
3. sayHi()가 "Hi!"를 return 하면서 sayHi 함수가 종료되고, call stack에서 빠지게 된다.
   call stack : [greeting]
4. sayHi 함수가 종료되면서 greeting 함수도 종료되고, call stack에서 greeting이 빠져 call stack은 빈 상태가 된다.
   call stack : []

전역 컨텍스트

• 더 이상 바깥이 없는, 최상위 실행 컨텍스트

const hello = "hello"

function greeting() {
  sayHi();
}
function sayHi() {
  return "Hi!";
}
greeting();

위 코드에서 const hello 위치가 전역 컨텍스트가 된다.

function 함수

• 선언과 동시에 환경 레코드에 저장이 된다 ⇒ 호이스팅 발생!
• 사용하는 곳 아래에 위치하더라도 호이스팅이 발생하여 사용을 할 수 있게 된다

greeting(); // hoisting

function greeting() {
  console.log('hoisting');
}

let, const

• 선언 이전에 사용 불가능하다.
• var의 경우 선언 이전에 사용이 가능해서 호이스팅이 발생하는 문제가 생기지만 let과 const는 일시적 사각지대로 인해 Reference Error가 발생한다.
  • 일시적 사각지대(Temporal Dead Zone, TDZ) : 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "일시적 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현한다. - MDN

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

lexical environment (렉시컬 환경, 정적 환경)

• 환경 레코드 + outer를 의미한다.
  • outer (외부 환경 참조) : 한 단계 바깥, 즉 가장 근접한 스코프를 가리킨다. (마지막에 실행될 함수 기준으로, 마지막 실행 함수의 outer는 마지막에서 두번째로 실행될 함수를 가리킨다)

참고 자료

https://developer.mozilla.org/ko/docs/Glossary/Call_stack
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let
https://www.youtube.com/embed/EWfujNzSUmw