[JS] var, let, const 차이

🧡 JavaScript

1. var, let, const란?

JavaScript에서 변수를 선언하는 방법에는 var, let, const 세 가지가 있다.

각각의 특징과 동작 방식이 다르므로 올바르게 사용하는 것이 중요하다.

---

2. var의 특징

var는 ES6 이전부터 존재했던 변수 선언 방식이다.

---

주요 특징

• 함수 레벨 스코프(Function Scope): var로 선언된 변수는 함수 내부에서만 유효하다.
• 변수 호이스팅(Variable Hoisting): 변수 선언이 코드 실행 전에 끌어올려지지만, 값은 할당되지 않음 (undefined 상태).
• 중복 선언 가능: 같은 이름으로 여러 번 선언해도 에러가 발생하지 않음.

---

예제

console.log(a); // undefined 발생
var a = 10;
console.log(a); // 10

if (true) {
    var b = 20;
}
console.log(b); // 20 (블록을 벗어나도 접근 가능)

위 코드에서 var 변수는 블록 스코프가 아닌 함수 스코프를 가지므로 if문 밖에서도 b를 접근할 수 있다.

---

3. let의 특징

let은 ES6에서 도입된 변수 선언 방식으로, var의 단점을 보완한다.

---

주요 특징

• 블록 레벨 스코프(Block Scope): {} 블록 내부에서만 유효하다.
• 변수 호이스팅 발생: 하지만 TDZ(Temporal Dead Zone)에 의해 초기화 전 접근 불가.
• 중복 선언 불가능: 같은 스코프 내에서 같은 변수 이름으로 다시 선언하면 에러 발생.

---

예제

let x = 10;
console.log(x); // 10

if (true) {
    let y = 20;
    console.log(y); // 20
}
// console.log(y); : 에러발생

---

4. const의 특징

const는 let과 대부분 유사하지만, 값을 재할당할 수 없다는 차이점이 있다.

---

주요 특징

• 블록 레벨 스코프(Block Scope): {} 블록 내부에서만 유효하다.
• 변수 호이스팅 발생: 하지만 TDZ에 의해 초기화 전 접근 불가.
• 상수(constant) 선언: 선언 후 값을 변경할 수 없음.
• 객체와 배열의 변경 가능: 단, 객체의 속성이나 배열 요소 변경은 가능하다.

---

예제

const PI = 3.14;
// PI = 3.1415;

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4] (배열 요소 추가 가능)

const obj = { name: 'Alice' };
obj.age = 25;
console.log(obj); // { name: 'Alice', age: 25 } (객체 속성 추가 가능)

---

5. 어떤 경우에 사용해야 할까?

• 변하지 않는 값은 const를 사용하자 (예: 상수 값, 객체 참조 고정 등).
• 값이 변할 가능성이 있는 경우 let을 사용하자.
• var는 사용을 지양하자. let과 const가 제공하는 블록 스코프와 TDZ로 인해 코드의 안정성이 높아진다