[Javascript] 자바스크립트 변수 선언, 스코프, TDZ, 호이스팅, 스코프 체인, 클로저 총정리

---

✅ 1. 변수 선언 방식과 스코프

자바스크립트에서는 변수를 var, let, const로 선언하며 각각의 스코프(Scope)와 호이스팅(Hoisting), TDZ(Temporal Dead Zone) 특징이 다릅니다.

선언 키워드	스코프	재선언	재할당	호이스팅	TDZ
var	함수(function)	O	O	선언+초기화	❌ 없음
let	블록(block)	❌	O	선언만 호이스팅	✅ 있음
const	블록(block)	❌	❌	선언만 호이스팅	✅ 있음

---

✅ 2. 호이스팅(Hoisting)이란?

호이스팅은 변수나 함수 선언이 스코프의 최상단으로 끌어올려지는 현상

  

    
    
    
    
  
console.log(a); // undefined
var a = 5;

• var a 선언이 위로 올라감
• 내부적으로는 다음처럼 작동:

  

    
    
    
    
  
var a;
console.log(a); // undefined
a = 5;

---

🔹 let/const는 왜 에러?

  

    
    
    
    
  
console.log(b); // ❌ ReferenceError (TDZ)
let b = 5;

• let은 선언은 호이스팅되지만 초기화는 안 됨
• 따라서 선언 전 접근은 에러 (Temporal Dead Zone)

---

✅ 3. TDZ (Temporal Dead Zone)란?

변수 선언이 호이스팅은 되었지만 초기화 전까지 접근이 불가능한 "죽은 구역"

  

    
    
    
    
  
{
    // TDZ 구역 시작
    console.log(x); // ❌ ReferenceError
    let x = 3;
}

• let, const는 선언 시점부터 초기화 전까지 TDZ 상태
• 이 구역에서 변수에 접근하면 오류 발생

🔹 TDZ 예시 심화

  

    
    
    
    
  
function test(condition) {
    if (condition) {
        let value = 'foo';
    }
    console.log(value); // ❌ ReferenceError
}

---

✅ 4. 변수 선언 없이 할당 → 전역 변수?

  

    
    
    
    
  
function test() {
    x = 10; // var/let/const 없음
}
test();
console.log(x); // ✅ 전역에 x가 생김

• 암시적 전역변수로 만들어져 window.x 혹은 globalThis.x가 됨
• "use strict" 모드에서는 오류 발생

  

    
    
    
    
  
"use strict";
function test() {
    y = 5; // ❌ ReferenceError
}

---

✅ 5. 스코프 체인(Scope Chain)

스코프 체인은 현재 스코프 → 상위 스코프 → 최상위 스코프까지 순차적으로 변수를 찾는 구조

  

    
    
    
    
  
let a = 1;
function outer() {
    let b = 2;
    function inner() {
        let c = 3;
        console.log(a, b, c);
    }
    inner();
}
outer();

• inner()는 자기 스코프에 없으면 바깥에서 찾아서 접근 가능
• 변수 참조는 가장 가까운 선언부터 차례대로 상위로

---

✅ 6. 클로저(Closure)와 스코프 관계

클로저란 함수가 선언될 당시의 외부 스코프를 기억하는 함수

  

    
    
    
    
  
function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    }
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

• inner()는 outer() 실행이 끝난 뒤에도 count에 접근 가능
• 왜냐하면 inner는 outer의 스코프를 "기억"하고 있기 때문
• 이게 클로저! 스코프 체인을 함수 생명주기 밖까지 유지

---

✅ 7. 실무에서의 let / const 전략

🚨 var는 피해야 하는 이유

• 함수 스코프라 의도치 않게 재정의 가능
• 호이스팅 + 초기화까지 되어 undefined 발생
• 블록 안에 선언해도 블록 밖에서 접근 가능

✅ let vs const 사용 팁

상황	추천 키워드
값을 바꾸지 않을 예정	const
값이 변경될 가능성이 있을 때	let

💡 팀 내 코드 규칙 예시

  

    
    
    
    
  
// 기본은 const
const user = { name: "Tom" };

// 변경 가능성 있는 경우만 let
let count = 0;

// var는 금지!

---

✅ 8. 그림 요약 (구조 흐름도)

  

    
    
    
    
  
┌─────────────────────────────┐
│ Global Scope                │
│  └── let x = 1              │
│  └── function outer() {     │
│        └── let y = 2        │
│        └── function inner() │
│               └── let z = 3 │
│               └── console(x,y,z) │
│          }                 │
└─────────────────────────────┘

스코프 체인: inner → outer → global

---

✅ 전체 요약

개념	설명
호이스팅	선언만 끌어올려짐. var은 초기화도 함께. let/const는 초기화 X
TDZ	선언은 되었지만 초기화 전까지 접근 불가한 시점
스코프	변수가 유효한 코드의 범위 (function / block)
스코프 체인	바깥 스코프까지 변수를 찾는 연결 구조
클로저	함수가 외부 스코프를 기억해 계속 참조 가능
let/const 전략	const 우선, let 필요할 때만, var 사용 지양

---