출처: https://velog.io/@dongjun187/javascript-var-let-const-의-차이점

var, let, const의 차이점

자바스크립트에서 사용되는 변수 선언 방식에는 세가지가 있습니다.

바로 var, let, const 입니다.

var는 예전에는 사용되어 왔지만 (ES6 이전), 현재는 잘 사용되지 않는 변수 선언식이고,

주로 let 과 const가 사용됩니다.

이 변수들의 대표적인 차이점을 비교해 보면 세가지가 존재합니다.

1. 중복 선언과 재할당
2. 스코프 범위
3. 호이스팅

1. 중복 선언과 재할당

var

1var a = 5;
2console.log(a); // 5
3
4var a = 10;
5console.log(a); // 10
6
7a = 15;
8console.log(a); // 15

var 에서는 중복 선언과 재할당이 모두 가능하고, 마지막에 할당된 값이 최종 변수로 저장됩니다.

let

1let a = 5;
2
3let a = 10;
4console.log(a); // SyntaxError
5
6a = 10;
7console.log(a); // 10

let 에서는 중복선언이 불가능하지만 var 와 동일하게 재할당은 가능합니다.

const

1const a = 5;
2const a = 10;
3console.log(a); // SyntaxError:
4
5a = 10;
6console.log(a); // TypeError
7
8const person = { name: 'Kim' }
9person.name = 'Park'; //가능 

const 에서도 let 과 동일하게 중복 선언이 불가능하며, 재할당 또한 불가능합니다. 하지만 const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능합니다.

2. 스코프 범위

var

var 는 함수 단위 스코프(function-level scope)입니다.

1function example() {
2    if (true) {
3        var x = 10;
4    }
5    console.log(x); // 10
6}
7
8console.log(x); // error

var 변수가 선언되면 함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능합니다.

let, const

let 과 const 는 블록 단위 스코프(block-level scope)입니다.

1function example() {
2    if (true) {
3        let x = 10;
4        const y = 12;
5    }
6    console.log(x); // ReferenceError: x is not defined
7    console.log(y); // ReferenceError: y is not defined
8}
9
10console.log(x); // ReferenceError: x is not defined
11console.log(y); // ReferenceError: y is not defined

중괄호 { } 블록 내부에서 선언된 변수는 외부에서 참조가 불가능합니다.

3. 호이스팅

var

var로 선언된 변수는 선언이 함수의 최상단으로 끌어올려지는 것처럼 동작합니다. 하지만 변수 초기화는 호이스팅되지 않고, 변수는 undefined로 초기화됩니다.

1console.log(x); // undefined
2var x = 5;
3console.log(x); // 5

위의 코드에서 var x 선언이 함수 또는 전역 스코프의 최상단으로 끌어올려지지만 초기화는 나중에 이루어집니다.

let, const

let , const 으로 선언된 변수도 호이스팅이 되지만, 초기화가 호이스팅되지 않으며, 초기화 전에 해당 변수를 접근하면 ReferenceError가 발생합니다. 이를 "Temporal Dead Zone (TDZ)"라고 부릅니다.

1console.log(y); // ReferenceError: Cannot access 'y'
2console.log(z); // ReferenceError: Cannot access 'z'
3let y = 10;
4const z = 15;
5console.log(y); // 10
6console.log(z); // 15

위의 코드에서 let y 와 const z 선언이 호이스팅되지만, 초기화는 해당 줄에 도달할 때 이루어집니다.