JS var, let, const

var, let, const

이전에는 var을 이용해서 변수를 선언하였는데 ES6에서 let과 const가 추가되었다. 다음의 var 문제점들로 인해 let과 const의 사용이 권장된다.

 

var의 문제점

재선언이 가능하다.

var greeting = "Nice to meet you.";
var greeting = "I'm back.";
var greeting = "Goodbye.";
console.log(greeting); // Goodbye.

let greeting = "Nice to meet you.";
let greeting = "I'm back.";
let greeting = "Goodbye.";
console.log(greeting);
// SyntaxError: Identifier 'greeting' has already been declared

var로 선언한 변수를 또 var로 선언을 해도 에러가 발생하지 않는다. 실제 프로그램을 작성할 때 선언했던 변수를 또 다시 선언할 일이 없다. 이를 허용하면 실수할 위험이 높고 원하는대로 동작하지 않을 것이다. 값을 변경하려면 재할당하는 방식이 옳다. let으로 선언한 변수를 또 다시 let으로 선언하려고 하면 자체적으로 에러가 발생하여 코딩할 때 안전하다.

 

블록 스코프를 무시한다. 함수 스코프만 따른다.

// var 선언
var greeting = "Nice to meet you.";
var times = 1;
if (times > 0) {
var greeting = "I'm back.";
console.log(greeting); // I'm back.
}
console.log(greeting); // I'm back.

// let 선언
let greeting = "Nice to meet you.";
let times = 1;
if (times > 0) {
  let greeting = "I'm back.";
  console.log(greeting); // I'm back.
}
console.log(greeting); // Nice to meet you.

if문 블록 밖에서 greeting을 출력했는데 안에서 선언된 greeting의 값이 출력된다. 한 함수의 내부라서 블록 밖이더라도 유효한, 함수 스코프가 적용되는 것이다. 블록 밖에서도 유효하다. 이는 재선언된 것 처럼 작동한다. 반면, let으로 선언한 변수는 if문 블록 안과 밖이 구분되는 블록 스코프가 작용한다.

 

변수 호이스팅으로 인해 선언 전에 변수나 함수를 참조하여도 에러가 나지 않는다.

console.log(greeting); // undefined
var greeting = "hello";
console.log(greeting); // hello

스코프와는 조금 먼 이야기지만 호이스팅 측면에서도 var보다 let, const를 사용하는 것이 좋다. 프로그램도 사람이 작성하는 것이기 때문에 위에서 아래로, 왼쪽에서 오른쪽으로 작성하는 것이 자연스럽다. 사용할 변수를 사용하겠다고 선언을 하고 나서 사용하는 것이 사용하고 나서 사용하겠다고 선언하는 것보다 자연스럽다. 협업할 때 무수히 긴 코드에서 어떤 예외상황이 일어날 수 있다는 것을 일일이 고려하는 것보다 안일어나도록 사전에 조치하는 것이 좋고, 그러면 에러의 원인도 찾기도 쉬울 것이다.
var을 사용하면 호이스팅이 일어난다. 먼저 사용하고 나서 사용하겠다고 말을 해도 에러가 나지 않는다.

console.log(greeting);
let greeting = "hello";
console.log(greeting);
// ReferenceError: Cannot access 'greeting' before initialization

const와 let을 사용하면 호이스팅되지 않고 에러를 발생시킨다. 스코프의 시작 지점부터 변수의 초기화 단계 시작 지점까지 변수를 참조할 수 없다. 이를 일시적 사각지대(TDZ, Temporal Dead Zone)이라고 부른다.

 

let과 const

let과 const 모두 변수를 선언하는 키워드이다. let은 값을 재할당할 수 있고 const는 재할당이 불가능한, 상수로서 쓰인다. 값이 변경되면 안되는 값이라면 const를 사용하여 실수를 방지하는 것이 권장된다.
let은 선언하고 할당을 안하면 undefined로 초기화되는데, const는 재할당이 안되므로 선언과 동시에 값을 할당하지 않으면 에러가 발생한다.
var의 문제점이었던 재선언을 하려고 하면 SyntaxError에러가 발생하며 재선언이 불가능하다.