[JavaScript] 변수 선언 var(ES5) / let, const(ES6)의 차이점

var 키워드는 간단한 테스트 외에는 사용하지 않는다고 들었고 그 이후로 개발하면서 변수 선언할 때 let과 const를 사용해왔지만, 자세한 이유를 알지 못했어서 이번에 변수 키워드에 대해 이해해볼겸 정리해보려고 합니다.

---

1. 변수 선언 방식

1️⃣ var

우선, 아래의 코드를 살펴봅시다.

var name = 'kang';
console.log(name);	// kang

var name = 'dori';
console.log(name);	// dori

name 변수를 2번이나 선언했는데도 에러가 나지 않고 있습니다.

var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작합니다.

초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시됩니다. 이 때 에러는 발생하지 않습니다.

위 코드처럼 변수를 중복 선언하고 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생합니다.

 

 

2️⃣ let & const

let name = 'kang';
console.log(name);

let name = 'dori';
console.log(name);	// Uncaught SyntaxError: Identifier 'name' has already been declared

선언 방식을 let으로 변경하였더니 이미 선언되었다는 에러 메세지가 출력됩니다. ( const도 마찬가지 )

 

그렇다면 let과 const의 차이점은 무엇일까요?

바로 재할당 입니다. 아래 코드를 살펴보겠습니다.

---

let name = 'kang';
name = 'dori';
console.log(name);	// dori

let 키워드로 선언된 name 변수를 재할당하였더니, 에러 없이 출력되는 것을 확인할 수 있습니다.

 

const NAME = 'kang';
NAME = 'dori';
console.log(name);	// Uncaught TypeError: Assignment to constant variable.

반면에 const 키워드로 선언된 NAME 변수를 재할당하였더니, 재할당할 수 없다는 에러 메세지가 출력됩니다.

---

2. 호이스팅(Hoisting)

우선, 아래 코드를 살펴봅시다.

console.log(score);	//undifined
var score;

변수 선언문보다 변수를 참조하는 코드가 앞에 있습니다.

근데 참조 에러(Reference Error)가 출력되지 않고, undifined가 출력됩니다.

이는 변수 선언이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행됐기 때문입니다.

이처럼 호이스팅(Hoisting)은 var 키워드나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말합니다.

 

사실 변수 선언 뿐만 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅이 됩니다.

모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문입니다.

하지만, var로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러(Reference Error)가 발생합니다.

 

이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(TDZ; Temporal Dead Zone)에 빠지기 때문입니다. 

 

변수는 아래 3단계에 걸쳐 생성되는데,

선언 단계 > 초기화 단계 > 할당 단계

var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다.

하지만, let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다.

이렇게 되면 선언 단계가 실행될 때, 아직 변수가 초기화(메모리 공간 확보 및 undefined로 초기화)가 되지 않아서 let으로 선언된 변수는 선언문 이전에 변수를 참조할 수 없습니다.