var과 let의 차이점과 호이스팅

---

🔍 var과 let의 차이

1. var의 문제점

1-1. 전역 변수 문제

• 블록 스코프가 아닌 함수 스코프를 가지기 때문에 블록 { } 내부에 선언한 변수가 바깥에서도 접근 가능한 상황이 발생함
• 예 )

for (var i = 0; i < 4; i++) {
  console.log(i); // 0, 1, 2, 3
}
console.log(i); // 4 --> i가 블록 밖에서도 접근한다.

1-2. 중복 선언 가능

• var는 같은 이름으로 변수를 다시 선언해도 에러가 발생하지 않는다.
• 예 )

var price = 2000;
var price = 5000;

console.log(price) // 5000

1-3. 호이스팅 문제 (하단 부분에 호이스팅 개념 소개)

• var는 선언과 초기화가 동시에 끌어 올려지기 때문에, 초기화 전에 변수에 접근하면 undefined가 반환 됨.
• 예 )

console.log(a); // undefined - 2번 줄에서 a를 선언했는데.. 오류가 안나고 undefined..?
var a = 10;
console.log(a); // 10

---

2. let의 등장과 개선점

let은 ES6(2015년)에서 추가되어 var의 문제점을 해결했음!!

2-1. 블록 스코프 지원

• let은 블록 스코프를 가지므로, { } 내부에서만 변수를 사용할 수 있음.
• 예 )

for (let i = 0; i < 4; i++) {
  console.log(i); // 0, 1, 2, 3
}
console.log(i); // ReferenceError: i is not defined

2-2. 중복 선언 불가

• 같은 스코프에서 동일한 이름으로 변수를 선언하면 에러가 발생함.
• 예 )

let price = 2000;
let price = 5000; // SyntaxError: Identifier 'price' has already been declared

console.log(price)

2-3. TDZ(Temporal Dead Zone) 도입

• 선언 전에 변수를 사용하면 에러가 발생함. var와 달리 undefined를 반환하지 않음!
• 예 )

console.log(a);
let a = 10; // ReferenceError: a is not defined
console.log(a);

---

🌐 호이스팅과 var, let의 차이

1. 호이스팅 정의

• 자바스크립트는 실행 전에 변수와 함수 선언을 코드의 최상단으로 끌어 올린다.
• 하지만 초기화는 호이스팅되지 않기 때문에, 선언 후 초기화 전에 변수를 사용하면 차이가 발생한다.

2. var의 호이스팅

• 선언과 초기화가 함께 끌어올려져 초기값이 undefined로 설정된다.

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

3. let의 호이스팅

• 선언만 끌어올려지고 초기화는 끌어올려지지 않으므로 초기화 전에 접근하면 에러가 발생함.

console.log(a);
let a = 10; // ReferenceError: a is not defined
console.log(a);

---

🚫 결론 : var 사용 금지

1. 블록 스코프가 없어서 의도하지 않은 전역 변수 생성 가능성이 있음.
2. 중복 선언 허용으로 debugging이 어려움
3. 초기화 전에 undefined를 반환해 버그를 유발할 가능성 ⬆️