실행 컨텍스트의 3가지 구성 요소#

실행 컨텍스트 스택 (콜 스택)#

• 자바크스립트는 싱글 스레드 기반 언어
• 한 번에 하나의 컨텍스트만 실행
• 이 컨텍스트들은 Stack(스택) 구조로 관리하며 이를 **콜 스텍(Call Stack)**이라고 함

1
function first() {
2
  second();
3
  console.log("first");
4
}
5

6
function second() {
7
  console.log("second");
8
}
9

10
first();

• 실행 컨텍스트의 흐름
  • global() → 가장 먼저 실행
  • first() 실행 → 컨텍스트 push
  • second() 실행 → 컨텍스트 push
  • second() 끝 → 컨텍스트 pop
  • first() 끝 → 컨텍스트 pop
  • global() 종료

변수 선언의 호이스팅#

1
console.log(x); // undefined
2
var x = 10;

해당 코드는 호이스팅을 통해 다음과 같이 해석

1
var x; // 선언만 호이스팅 됨
2
console.log(x); // undefined
3
x = 10; // 초기화는 호이스팅되지 않음

함수 선언의 호이스팅#

1
sayHi(); // TypeError: sayHi is not a function
2

3
var sayHi = function() {
4
  console.log("Say, Hi!");
5
}

해당 코드는 호이스팅을 통해 다음과 같이 해석

1
var sayHi; // 선언 호이스팅
2
sayHi(); // sayHi는 아직 함수가 아님 -> 에러 발생
3
sayHi = function() {
4
  console.log("Say, Hi!");
5
}

❓ TDZ (Temporal Dead Zone)란?#

• let이나 const로 선언된 변수는 호이스팅되지만
• 선언 이전에는 접근이 불가능한 일시적 사각지대(Temporal Dead Zone)에 존재함

1
console.log(x); // Reference Error
2
let x = 10;

스코프의 종류#

1
const a = 1;
2

3
function outer() {
4
  const b = 2;
5
  function inner() {
6
    const c = 3;
7
    console.log(a, b, c);
8
  }
9

10
  inner();
11
}
12

13
outer(); // 1, 2, 3

• a는 전역에서, b는 outer에서, c는 inner에서 찾는 이 참조 경로가 스코프 체인

실행 컨텍스트와의 관계#

• 실행 컨텍스트는 Lexical Environment 정보를 갖고 있고 이 내부에는,
  • Environment Record: 현재 스코프의 변수/함수 정보
  • Outer Environment Reference: 상위 스코프에 대한 참조
• 를 가지고 있으며 이 Outer Reference를 따라 올라가는 구조가 스코프 체인

스코프 체인 탐색 시 주의 사항#

• 하위 → 상위 방향으로만 탐색
  • 상위 스코프에서 하위 스코프는 알 수 없음
• 변수가 shadowing되면 가장 가까운 것을 사용

1
const a = 1;
2

3
function test() {
4
  const a = 2;
5
  console.log(a); // 2가 가까우므로 2
6
}

• 클로저에서 활용됨
  • 함수가 종료되어도 상위 스코프 참조가 유지 → 클로저 생성