[JS] 자바스크립트 변수 var , let, const 차이 그리고 호이스팅

내가 사회초년생때 웹디자이너로서 JS를 배웠을때, var로 배웠다. 그런데 시간이 흘러 이제는 let과 const로 선언을 하니 좀 생소하기도 하고 이번 기회에 개념을 한 번 잡아보고자 한다.

 

1. var (오래된 방식, 가급적 사용 지양)

✅ 특징

 

• 함수 범위(function scope): 함수 내부에서 선언되면 함수 내에서만 유효
• 변수 호이스팅(hoisting) 발생: 선언이 스코프의 최상단으로 끌어올려짐
• 중복 선언 가능 (문제 발생 가능성 있음)
• let과 const 등장 이후에는 거의 사용하지 않음

function example() {
    console.log(a); // undefined (호이스팅)
    var a = 10;
    console.log(a); // 10
}
example();

 

 

2. let (블록 범위 변수)

✅ 특징

 

• 블록 범위(block scope): {} 내부에서만 유효
• 호이스팅 발생하지만 초기화되지 않음: 선언 전에 사용하면 오류 발생
• 중복 선언 불가

function example() {
    if (true) {
        let b = 20;
        console.log(b); // 20
    }
    console.log(b); // Error (b is not defined)
}
example();

 

 

3. const (상수, 변경 불가)

✅ 특징

 

• let과 동일한 블록 범위(block scope)
• 값 재할당 불가능 (immutable)
• 하지만 객체/배열의 속성 변경 가능

const c = 30;
c = 40; // Error (재할당 불가)

const obj = { name: "Alice" };
obj.name = "Bob"; // 가능 (객체 속성 변경 가능)
console.log(obj); // { name: "Bob" }

 

---

🚀 정리

키워드	스코프	재선언	재할당	호이스팅
var	함수	가능	가능	선언+초기화 (값은 undefined)
let	블록	불가능	가능	선언만 호이스팅, 초기화 X
const	블록	불가능	불가능	선언만 호이스팅, 초기화 X

✅ 최신 코드에서는 var 대신 let과 const를 사용하는 것이 좋습니다!
보통 변하지 않는 값은 const, 변할 가능성이 있으면 let을 사용해요.

---

1️⃣ 호이스팅(Hoisting)

자바스크립트 엔진이 변수와 함수의 선언을 코드 실행 전에 메모리의 최상단으로 끌어올리는 현상

 

 

 

🔹 var의 호이스팅

var는 선언이 스코프의 최상단으로 이동하면서 undefined로 초기화됩니다.

console.log(a); // undefined (변수 선언이 끌어올려짐)
var a = 10;
console.log(a); // 10

 

➡️ 내부적으로 이렇게 동작:

var a;  // 선언이 최상단으로 이동 (호이스팅)
console.log(a); // undefined (값은 아직 할당되지 않음)
a = 10;
console.log(a); // 10

🚨 var는 의도치 않은 undefined 값을 가질 수 있어 버그 발생 가능성이 높아요.

---

🔹 let과 const의 호이스팅

둘 다 호이스팅은 발생하지만, 초기화되지 않아 사용할 경우 오류 발생

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

 

➡️ 내부적으로 이렇게 동작:

// 선언은 호이스팅되지만, 초기화는 여기서 진행되지 않음
let b;
console.log(b); // ❌ 사용 불가 (ReferenceError 발생)
b = 20;

 

🚀 이것을 "일시적 사각지대(Temporal Dead Zone, TDZ)"라고 해요.

const도 동일한 원리

console.log(c); // ReferenceError
const c = 30;

const는 선언과 동시에 초기화가 필요하기 때문에 TDZ에서 접근 불가!

 

---

2️⃣ 스코프(Scope)

변수에 접근할 수 있는 범위를 의미

 

🔹 var는 함수 스코프(Function Scope)

 

• 함수 내부에서 선언된 var는 함수 내에서만 접근 가능
• 블록({}) 내부에서 선언해도 함수가 아니면 외부에서도 접근 가능

 

if (true) {
    var x = 100;
}
console.log(x); // 100 (if 블록 밖에서도 접근 가능)

🚨 var는 블록 스코프를 무시하기 때문에, 예기치 않은 버그 발생 가능!

하지만 함수 내부에서 선언하면 함수 밖에서는 접근 불가

function example() {
    var y = 200;
}
console.log(y); // ReferenceError (함수 외부에서 접근 불가)

---

🔹 let과 const는 블록 스코프(Block Scope)

• {} 내부에서 선언된 변수는 해당 블록 내에서만 접근 가능

if (true) {
    let a = 10;
    const b = 20;
    console.log(a, b); // 10, 20 (블록 내부 접근 가능)
}
console.log(a, b); // ReferenceError (블록 외부에서는 접근 불가)

 

함수 스코프도 포함됨

function example() {
    let num = 42;
    console.log(num); // 42
}
console.log(num); // ReferenceError (함수 밖에서 접근 불가)

 

---

3️⃣ 호이스팅과 스코프 정리

키워드	호이스팅	초기화	TDZ(일시적 사각지대)	스코프
var	✅ 발생	undefined	❌ 없음	함수 스코프
let	✅ 발생	❌ (선언만)	✅ 있음	블록 스코프
const	✅ 발생	❌ (선언과 초기화 필요)	✅ 있음	블록 스코프

🚀 최신 코드에서는 let과 const를 사용하여 블록 스코프를 지키고 예기치 않은 호이스팅 문제를 방지하는 것이 좋습니다!

 

 

 

* 위 포스팅은 챗GPT 답변을 토대로 작성되었습니다.