코어 자바스크립트 헷갈리는 부분 정리

1. environment 용어 정리

아주 자연스럽고 중요한 고민이에요.
처음에 이 개념은 정말 추상적으로 느껴지기 쉬워요.
지금 힘들다고 느끼는 이유는 용어들이 많고,
그게 언제, 어디서, 어떻게 연결되는지가 감이 안 잡히기 때문이에요.

제가 비유와 쉬운 예시로, 꼭 처음부터 차근차근 설명드릴게요.
🔍 한 문장씩, **“왜 이런 말이 나오는지”**부터 따라가 보죠.

---

✳️ 용어 정리부터!

먼저 헷갈리는 용어 세 개만 먼저 정리할게요.

용어 쉬운 말로 바꾸면 설명

Lexical Environment	“변수 보관 창고”	지금 컨텍스트에서 쓸 수 있는 변수들을 저장해둔 공간
Environment Record	“진짜 변수들이 담긴 상자”	변수명이랑 실제 값들이 들어 있는 객체
outerEnvironmentReference	“바깥 참조 링크”	한 단계 바깥 컨텍스트의 Lexical Environment를 가리키는 포인터

---

📚 그럼 이제 문장을 쉽게 해석해볼게요.

“선언될 당시의 Lexical Environment”는 2장에서 소개한 실행 컨텍스트의 구성 요소 중 하나인 outerEnvironmentReference에 해당합니다.

이 말은,

“어떤 함수가 선언될 때, 그 함수는 자기가 만들어질 당시의 변수들(LexicalEnvironment)을 기억해 둡니다. 이 기억은 실행될 때 outerEnvironmentReference라는 이름으로 저장돼요.”

즉,

• 함수가 선언된 시점의 위치에서 쓸 수 있던 변수들을 기억하고 있음
• 그래서 나중에 함수가 실행되더라도 그 시점의 변수들에 접근 가능해요

---

🧠 예시로 이해해볼까요?

function outer() {
  let a = 10;

  function inner() {
    console.log(a);  // ❗️여기서 a를 찾을 수 있는 이유
  }

  return inner;
}

const fn = outer();  // inner를 받아옴
fn();  // 10 출력

🔍 이 코드의 흐름을 보면

• outer()가 실행되면서 a = 10이 저장됨
• inner()는 outer() 안에서 선언됐기 때문에,
  → inner()는 선언될 당시의 LexicalEnvironment, 즉 a = 10을 기억함
• inner()는 a를 스스로 갖고 있지 않지만,
  → outerEnvironmentReference를 통해 바깥(outer)의 환경을 참조함
• 그래서 inner()가 나중에 호출되더라도 a를 찾을 수 있음

---

📌 그래서 이 문장이 말하는 핵심은?

“어떤 컨텍스트 A에서 선언한 내부 함수 B는
실행될 때 B의 outerEnvironmentReference를 통해
A의 변수들을 계속 참조할 수 있다.”

반대로,

“A에서는 B의 변수에 접근할 수 없다.
왜냐면 B는 A보다 나중에 실행되는 독립된 환경이기 때문이다.”

---

🎨 이미지로 요약

[전역 컨텍스트]
   ↓
[outer 실행 컨텍스트]
   - LexicalEnvironment: { a: 10 }
   - 선언: inner()
   ↓
[inner 실행 컨텍스트]
   - LexicalEnvironment: {}
   - outerEnvironmentReference --> outer의 LexicalEnvironment 참조!

---

🌸 한마디로

함수는 "내가 어디에서 만들어졌는지"를 기억한다.
그래서 실행될 때도 그 기억(outerEnvironmentReference) 덕분에
바깥 변수에 접근할 수 있는 거예요!

---

이 개념은 굉장히 어려운 편이니까
한 번에 다 이해하려고 하지 않으셔도 괜찮아요.
필요하시면 제가 그림 그려서 다시 설명드릴 수도 있어요 😊