JS Deep Dive 23장. 실행 컨텍스트 (2)

안타깝게도 이번 글은 영화 인셉션을 본 사람만 이해 가능하다. 출처 WARNER BROS.

 

저번 글에서 실행 컨텍스트와 렉시컬 환경이란 뭘까? 그 정의를 알아봤습니다.

이번 글은 그것들이 어떻게 동작하는지를 이해하는 글입니다.

 

시간 순으로 전체 순서 훑어보기

일단 어떤 코드가 있을 때 실행 컨텍스트와 렉시컬 환경이 생성되는 순서를 쭉 훑어봅시다.

책에는 다음과 같은 예제가 나와 있습니다.

 

var x = 1;
const y = 2;

function foo (a) {
  var x = 3;
  const y = 4;
  
  function bar (b) {
    const z = 5;
    console.log(a + b + x + y + z);
  }
  bar(10);
}

foo(20); // 42

 

왜 변수 이름을 x, y, z 따위로 지으면 안되는지를 명확하게 알 수 있는 코드입니다.

얼른 읽히지를 않습니다.

 

제가 기가 막힌 비유를 찾아서 아래에 적어놨으니, 일단은 잘 안 읽혀도 대충 넘어갑시다.

이 코드가 실행되면서 만드는 실행 컨텍스트의 흐름은 다음과 같습니다.

 

• 전역 객체 생성
• 전역 코드 평가
  • 전역 실행 컨텍스트 생성
  • 전역 렉시컬 환경 생성
    • 전역 환경 레코드 생성
      • 객체 환경 레코드 생성
      • 선언적 환경 레코드 생성
    • this 바인딩
    • 외부 렉시컬 환경에 대한 참조 결정
• 함수 foo 코드 평가
  • 함수 foo 실행 컨텍스트 생성
  • 함수 foo 렉시컬 환경 생성
    • 함수 foo 환경 레코드 생성
      • 객체 환경 레코드 생성
      • 선언적 환경 레코드 생성
    • this 바인딩
    • 외부 렉시컬 환경에 대한 참조 결정
• 함수 bar 코드 평가
  • 함수 bar 실행 컨텍스트 생성
  • 함수 bar 렉시컬 환경 생성
    • 함수 bar 환경 레코드 생성
      • 객체 환경 레코드 생성
      • 선언적 환경 레코드 생성
    • this 바인딩
    • 외부 렉시컬 환경에 대한 참조 결정

 

똑같은 얘기가 반복되는 느낌이죠?

맞습니다. 요 실행 컨텍스트라는 녀석은 생성되는 패턴이 정해져 있습니다.

단지 그 대상이 전역 객체냐 함수냐 이런 차이만 있을 뿐입니다.

여기까지 이해하면 50%는 이해한겁니다.

 

이쯤에서 실행 컨텍스트가 뭐하는 녀석이었는지를 되새겨볼까요?

실행 컨텍스트는 "식별자를 등록하고 관리하는 스코프"와 "코드 실행 순서 관리"를 구현한 내부 메커니즘이죠!

맞아요 저 "순서"를 가지고 있는 주체 자체가 실행 컨텍스트인겁니다.

이제 60% 이해했습니다.

 

그러면 이제 마법같은 비유를 들어볼 차례입니다.

영화 인셉션에 비유를 해봤습니다.

아래는 GPT가 써준 글인데, AI Slop 같지 않고 읽을만합니다.

믿으세요 여러분.

 

 

실행 컨텍스트를 인셉션에 비유한다면 어떨까?

영화 인셉션에서는 인물이 꿈속으로 들어가고, 그 안에서 다시 더 깊은 꿈으로 들어갑니다. JavaScript의 실행 컨텍스트도 이와 비슷하게 함수가 호출될 때마다 새로운 실행 세계가 만들어집니다.

1. 실행 컨텍스트는 하나의 꿈 세계입니다

JavaScript 코드가 실행되면 가장 먼저 전역 실행 컨텍스트가 만들어집니다. 이는 현실 세계에 해당합니다.

함수를 호출하면 새로운 실행 컨텍스트가 생깁니다. 이는 현실에서 1단계 꿈으로 들어가는 것과 같습니다. 그 함수 안에서 다른 함수를 호출하면 다시 새로운 실행 컨텍스트가 생깁니다.

const name = '코브';

function enterDream() {
  const level = 1;

  function enterDeeperDream() {
    const level = 2;
    console.log(name, level);
  }

  enterDeeperDream();
}

enterDream();

이 코드의 실행 순서는 다음과 같습니다.

전역 실행 컨텍스트
└── enterDream 실행 컨텍스트
    └── enterDeeperDream 실행 컨텍스트

인셉션의 꿈 단계로 표현하면 다음과 같습니다.

현실
└── 1단계 꿈
    └── 2단계 꿈

JavaScript는 현재 가장 깊이 들어간 실행 컨텍스트부터 처리합니다. enterDeeperDream 함수가 끝나면 2단계 꿈에서 빠져나오고, enterDream 함수로 돌아갑니다.

이 구조를 실행 컨텍스트 스택 또는 콜 스택이라고 합니다.

---

2. 렉시컬 환경은 꿈속의 기억과 주변 정보입니다

각 꿈 세계에는 그 세계에서 사용할 수 있는 사람, 물건, 규칙이 있습니다.

JavaScript 실행 컨텍스트에도 현재 위치에서 사용할 수 있는 변수와 함수 정보가 있습니다. 이것이 렉시컬 환경입니다.

렉시컬 환경에는 크게 두 가지가 들어 있습니다.

렉시컬 환경
├── 현재 환경의 변수와 함수
└── 바깥 렉시컬 환경을 가리키는 참조

예를 들어 enterDeeperDream 함수의 렉시컬 환경에는 다음과 같은 정보가 있습니다.

const level = 2;

하지만 name은 현재 함수 안에 없습니다.

console.log(name);

JavaScript는 현재 렉시컬 환경에서 name을 찾습니다. 찾지 못하면 바깥 렉시컬 환경으로 이동합니다.

enterDeeperDream 렉시컬 환경
→ enterDream 렉시컬 환경
→ 전역 렉시컬 환경

전역 렉시컬 환경에서 다음 값을 발견합니다.

const name = '코브';

이처럼 바깥 환경을 따라 변수를 찾는 과정이 스코프 체인입니다.

---

3. 꿈의 깊이와 변수 검색 방향

인셉션에서는 깊은 꿈에 들어간 사람이 위쪽 꿈의 상황에 영향을 받습니다. 하지만 위쪽 꿈에 있는 사람이 더 깊은 꿈의 구체적인 내용을 직접 알 수는 없습니다.

JavaScript의 스코프도 비슷합니다.

안쪽 함수에서는 바깥쪽 변수에 접근할 수 있습니다.

const reality = '현실';

function dreamLevel1() {
  const city = '비 오는 도시';

  function dreamLevel2() {
    const hotel = '호텔';

    console.log(reality);
    console.log(city);
    console.log(hotel);
  }

  dreamLevel2();
}

dreamLevel1();

dreamLevel2에서는 자신이 가진 hotel뿐 아니라 바깥쪽의 city와 reality에도 접근할 수 있습니다.

반대로 바깥쪽에서는 안쪽 변수에 접근할 수 없습니다.

function dreamLevel1() {
  function dreamLevel2() {
    const secret = '인셉션 계획';
  }

  dreamLevel2();

  console.log(secret); // ReferenceError
}

1단계 꿈에서는 2단계 꿈 안에만 존재하는 secret을 볼 수 없습니다.

변수 검색은 항상 현재 환경에서 시작해서 바깥 방향으로만 이동합니다.

---

4. 렉시컬이라는 말의 의미

렉시컬 환경은 함수가 어디에서 호출되었는지보다 함수가 어디에서 작성되었는지를 기준으로 결정됩니다.

const place = '현실';

function printPlace() {
  console.log(place);
}

function dream() {
  const place = '꿈속';
  printPlace();
}

dream();

결과는 다음과 같습니다.

현실

printPlace는 dream 안에서 호출되었습니다. 하지만 printPlace가 정의된 장소는 전역입니다.

따라서 printPlace의 바깥 렉시컬 환경은 dream이 아니라 전역 환경입니다.

인셉션에 비유하면, 어떤 인물이 현재 어떤 꿈에 들어와 있는지만 보는 것이 아닙니다. 그 인물이 원래 어떤 세계에 속해 있는지를 기준으로 기억의 연결 관계가 결정되는 것입니다.

---

5. 실행 컨텍스트와 렉시컬 환경의 차이

실행 컨텍스트는 JavaScript가 코드를 실행하기 위해 만드는 전체 작업 공간입니다.

렉시컬 환경은 그 작업 공간 안에서 변수와 함수를 관리하는 구조입니다.

실행 컨텍스트
├── 렉시컬 환경
├── this 값
├── 함수 인수
└── 기타 실행에 필요한 정보

 

인셉션으로 정리하면 다음과 같습니다.

JavaScript 개념	인셉션 비유
실행 컨텍스트	현재 들어와 있는 꿈 세계
실행 컨텍스트 스택	현실과 여러 단계의 꿈 구조
렉시컬 환경	꿈속에 존재하는 사람, 물건, 기억
외부 렉시컬 환경 참조	상위 꿈으로 이어지는 통로
스코프 체인	현재 꿈에서 상위 꿈으로 정보를 찾는 과정
함수 호출	더 깊은 꿈으로 진입
함수 종료	현재 꿈에서 빠져나오기
지역 변수	해당 꿈에서만 존재하는 물건
전역 변수	현실 세계에 존재하는 정보

핵심은 다음과 같습니다.

실행 컨텍스트는 코드가 실행되는 세계이고, 렉시컬 환경은 그 세계에서 접근할 수 있는 변수와 바깥 세계의 연결 정보를 담고 있습니다.

 

 

---

 

 

어떤가요? 확실히 렉시컬 환경, 환경 레코드라는 말 자체가 어려워서 더 이해가 안되었던 것 같아요.

이 비유가 자바스크립트가 동작하는 흐름을 이해하는 데에 조금이라도 도움이 되었기를 바랍니다.