var, let, const

ES5까지 변수를 선언할 수 있는 키워드는 var가 유일했지만,  ES6에서 var의 문제점을 보완한 let과 const가 추가되었다.

 

var

console.log(a) // undefined 할당하기 전에 참조가 가능하다.
var a = 1
var a = 2
console.log(a) // 2 같은스코프에서 재선언이 가능하다.
if(true) {
    var a = 3 // 코드블록 if 가 전역스코프이기 때문에 a는 재선언됨
}
console.log(a) // 3 a의 값이 변경됨

1. 재선언

같은 스코프 내에서 재선언이 가능하다. 

초기화문 없이 var를 이용해 재선언 하는 경우 기존의 값이 유지되지만, 값까지 할당하는 경우 기존 변수의 값이 변경된다.

2. 함수 레벨 스코프

지역스코프가 될 수 있는 코드블록은 함수가 유일하다.

이는 for, if 등 함수가 아닌 다른 코드블록 내에서 변수의 재선언으로 인한 오류를 발생시킨다.

또한 상대적으로 전역 변수를 많이 생성하게 되어, 의도하지 않은 재선언으로 예기치 못한 오류를 발생시킬 수 있다.

3. 호이스팅

선언과 동시에 초기화가 진행되어 값을 할당하기 전에 참조할 수 있으며, 그 경우 값으로 undefined를 반환한다.

이는 가독성을 떨어뜨리고, 오류를 발생시킬 가능성이 있다. 

 

let

console.log(a) // ReferenceError 발생: 1~3줄까지는 TDZ


let a
console.log(a) // undefined 할당하지 않았기 때문에 undefined로 초기화

a = 1 //변수 a에 값을 할당

if(true) {
    let a = 2
    console.log(a) // 코드블록 if의 지역변수 a
}
console.log(a) //전역변수 a

a = 3
console.log(a) // 3 재할당은 가능하다.
let a = 4 //재선언 금지: SyntaxError발생

1. 재선언 금지, 재할당 가능

같은 스코프 내에서 let를 사용한 변수와 같은 이름으로 변수를 재선언하면 SyntaxError가 발생한다. 

단, 재할당은 가능하다.(변수의 값이 변할 수 있다.)

2. 블록 레벨 스코프

모든 코드 블록이 지역스코프에 해당되어, 블록 내의 변수는 지역변수가 된다.

3. 호이스팅

선언과 초기화 단계가 분리되어 진행된다.

런타임 이전 평가 단계에서 선언은 실행되지만, 초기화는 런타임 과정에서 변수 선언문에 도달했을 때 실행된다.

암묵적으로 선언 단계가 실행된 스코프 최상위부터 런타임 과정에서 초기화가 실행되는 실제 선언문까지의 구간을

일시적 사각지대(TDZ)라고 하며, 일시적 사각지대에서 해당 변수를 참조할 경우 ReferenceError가 발생한다.

4. 전역 변수 let

전역 객체는 자바스크립트 엔진이 소스코드 실행 전 가장 먼저 생성하는 특수한 객체이다.

var를 사용한 전역변수는 전역함수와 암묵적 전역(키워드가 없는 변수), 함수 등과 함께 전역객체의 프로퍼티가 된다.

하지만 let을 사용한 전역변수는 전역객체의 프로퍼티가 아니다.

 

const

const키워드는 let과 유사한 부분이 많이 있지만, 재할당이 불가능하다는 큰 차이가 있다.

1. 선언과 초기화

반드시 선언과 초기화를 한 번에 하며, 그렇지 않은 경우 SyntaxError가 발생한다.

2. 재할당 금지

재선언 및 재할당이 금지된다. 

3. 상수값을 할당

재할당이 불가능하기 때문에 변하지 않는 상수를 값으로 하는 변수 선언 시 사용된다.

상수의 변수 이름은 일반적으로 대문자를 사용해 가독성을 높인다.

4. 변경 가능한 값

할당된 값이 원시 값일 때는 재할당할 수 없지만, 객체일 때는 프로퍼티 값에 접근해 변경할 수 있다.