[JS]let, const, var

var

1. 스코프
var로 선언된 변수는 함수 스코프를 가진다. 즉, 변수가 선언된 함수 내에서만 접근할 수 있으며, 함수 외부에서는 접근할 수 없다. 다만, var는 블록 스코프를 지원하지 않기 때문에 if문이나 for문과 같은 블록 내에서 선언된 변수는 블록 외부에서 접근할 수 있다.
2. 호이스팅
var 변수는 호이스팅(hoisting)에 의해 선언이 스코프의 최상단으로 끌어올려지며, 초기값으로 undefined가 설정된다. 즉, 선언 전에 변수를 참조하더라도 "undefined"를 반환하며, "ReferenceError"는 발생하지 않는다.
3. 재선언
같은 스코프 내에서 여러 번 선언할 수 있다. 이는 코드의 가독성을 떨어뜨릴 수 있으며, 기존 변수를 덮어쓰기 때문에 의도하지 않은 오류를 발생시킬 가능성이 있다.
4. 재할당
var로 선언된 변수는 언제든지 값을 변경할 수 있다. 즉, 변수에 새로운 값을 할당할 수 있으며, 이는 코드의 유연성을 높여준다.

function example() {
    console.log(a); //undefined(호이스팅 발생)
    var a = 10; //선언 및 초기화
    console.log(a); //10

    if (true) {
        var a = 20; //같은 함수 스코프 내에서 재선언
        console.log(a); //20
    }
    console.log(a); //20
}
example();

if (true) {
    var x = 20; 
}
console.log(x); //블록 스코프가 아닌 함수 스코프이기 때문에 가능

let

1. 스코프
let으로 선언된 변수는 블록 스코프를 가진다. 즉, 변수가 선언된 블록 내에서만 접근할 수 있으며, 블록 외부에서는 접근할 수 없다.
2. 호이스팅
let 변수는 호이스팅(hoisting)에 의해 선언이 스코프의 최상단으로 끌어올려지지만, 초기화는 선언문에 도달했을 때 이루어진다. 초기화되기 전까지는 TDZ(Temporal Dead Zone)에 놓이게 되어, 변수를 참조하면 "ReferenceError"가 발생한다.
3. 재선언
같은 스코프 내에서 let 변수는 재선언할 수 없다. 이는 변수 중복 선언으로 인한 혼란과 의도치 않은 오류를 방지하여 코드의 명확성과 유지보수성을 높이기 위한 설계이다.

4. 재할당
let으로 선언된 변수는 언제든지 값을 변경할 수 있다. 즉, 변수에 새로운 값을 할당할 수 있으며, 이는 코드의 유연성을 높여준다.

function example() {
    console.log(b); //ReferenceError: Cannot access 'b' before initialization (TDZ)
    let b = 10; //선언 및 초기화
    console.log(b); //10

    if (true) {
        let b = 20; //다른 블록 내에서 선언된 b
        console.log(b); //20
    }
    console.log(b); //10(블록 스코프 덕분에 값이 유지됨)
}
example();

const

1. 스코프
const로 선언된 변수는 블록 스코프를 가진다. let과 마찬가지로, 변수가 선언된 블록 내에서만 접근할 수 있다.
2. 호이스팅
const 변수는 호이스팅(hoisting)에 의해 선언이 스코프의 최상단으로 끌어올려지지만, 초기화는 선언문에 도달했을 때 이루어진다. 초기화 이전에 참조하면, let과 마찬가지로 TDZ(Temporal Dead Zone)에 의해 "ReferenceError"가 발생한다.
3. 재선언
같은 스코프 내에서 재선언할 수 없다. 이는 변수의 중복 선언으로 인한 오류를 방지한다.
4. 재할당
const로 선언된 변수는 한 번 할당된 값을 변경할 수 없다. 하지만 객체나 배열과 같은 참조형 데이터의 내부 속성은 변경할 수 있다.

function example() {
    console.log(c); //ReferenceError: Cannot access 'c' before initialization (TDZ)
    const c = 10; //선언 및 초기화
    console.log(c); //10

    if (true) {
        const c = 20; //다른 블록 내에서 선언된 c
        console.log(c); //20
    }
    console.log(c); //10
    
    // c = 30; // TypeError: Assignment to constant variable. (재할당 불가)

    const obj = { a: 1 };
    obj.a = 2; //가능(객체 내부 속성 변경)
    console.log(obj); //{ a: 2 }
    const arr = [1, 2, 3];
    arr.push(4); //가능(배열 요소 추가)
    console.log(arr); //[1, 2, 3, 4]
}
example();

정리

특성	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	선언과 초기화가 호이스팅	선언만 호이스팅	선언만 호이스팅
재선언	가능	불가능	불가능
재할당	가능	가능	불가능, 객체나 배열의 내부 속성은 변경 가능