[JavaScript] var와 let, const의 차이

let과 const

JavaScript의 ES6(ECMAScript 2015) 버전에서 새롭게 등장한 키워드로 var의 단점과 문제점을 해결하기 위해 도입되었다. var는 몇 가지 설계상의 한계와 의도하지 않은 동작을 일으키기 쉬운 특성을 가지고 있었기 때문에, 이를 보완하기 위해 let과 const가 추가되었다.

var와 let, const의 차이

var와 let, const는 다음과 같은 주요 차이점이 있다.

• 스코프
• 호이스팅
• 중복 선언 허용
• 전역 변수 오염

스코프와 호이스팅의 개념은 아래 글을 참고
https://velog.io/@juwon98/JavaScript-execution-context#lexical-environment

스코프(Scope)

var <- 함수 스코프를 가짐

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

let, const <- 블록 스코프를 가짐

if (true) {
    let x = 10;
}
console.log(x); // ReferenceError: x is not defined

호이스팅(Hoisting) / TDZ(Temporal Dead Zone)

var <- 호이스팅이 일어나기 때문에 아래와 같이 선언 전에도 접근이 가능함

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

let, const <- TDZ에 존재하기 때문에 선언 전에는 접근할 수 없음

console.log(a); // ReferenceError
let a = 5;

Temporal Dead Zone (TDZ)는 자바스크립트에서 let과 const로 선언된 변수에만 적용되는 개념으로, 변수가 선언되기 전까지 해당 변수에 접근할 수 없는 구역을 의미한다.
TDZ는 변수가 호이스팅되더라도 초기화되지 않기 때문에 발생한다.

중복 선언 허용

var <- 같은 이름의 변수를 중복해서 선언하더라도 문제가 발생하지 않음

var a = 10;
var a = 20; // 문제 없음
console.log(a); // 20

let, const <- 같은 이름의 변수를 중복해서 선언하면 SyntaxError 발생

let a = 10;
let a = 20; // SyntaxError: Identifier 'a' has already been declared

전역 변수 오염

var <- 전역에서 변수 선언시 window, global이 오염됨

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

let, const <- 전역을 오염시키지 않음

let a = 10;
console.log(window.a); // undefined