[JavaScript] var, let, const는 언제 어떻게 사용해야할까?

• var, let, const

 

ES6 이후의 환경에서 변수 선언 방식은 기존의 var를 사용하는 한 가지 방법에서

let과 const를 사용하는 두 가지 방식이 추가되어 var, let, const 세 가지 방식이 되었습니다.

 

처음 ES6를 접했을 때 각각의 선언 방식을

언제 어떻게 사용해야 하는지가 상당히 막연할 텐데

(실제로 실무에서 봐왔던 ES6이후의 환경을 처음 접해보는 개발자들은

대다수가 상수를 제외한 거의 모든 변수 선언에 let을 사용하고 있었습니다.)

 

아주 틀린 방법은 아니지만,

가장 좋은 방법은 아무래도 각각의 특징을 먼저 이해하고

사용 용도에 맞게 사용하는 것일 것입니다.

 

이 글에선 세 가지 변수 선언 방식의 동작 방식과 언제 어떻게 사용하는 것이 좋을 지에 대해

정리해보려고 합니다.

 

1. 각 선언 방식의 특징

가장 먼저 ES6 이전에 사용되던 var 방식은 단점이 극명했습니다.

먼저 아래의 코드를 살펴보고 출력 결과를 예상해보세요.

var a = 0;
console.log(a);

if (!a) {
  var a = 1;
}
console.log(a);

var a = 2;
console.log(a);

예상한 결과가 맞았나요?

로그의 출력 결과는 순서대로 0, 1 ,2가 출력됩니다.

 

var는 실제로 이렇게 블록 레벨로 지정했다고 생각한 변수를 블록 밖에서 호출이 가능합니다.

이유는 기본적으로 자바스크립트는 함수 레벨 스코프를 따르기 때문인데요.

위의 코드에서 선언된 var는 함수 외부에서 선언한 변수이기 때문에 전역 변수로 처리됩니다.

 

또한 중복 선언이 가능하기 때문에 같은 이름의 변수를 선언 시

디버깅에 애를 먹을 수 있습니다.

 

이런 var의 단점들을 보완하기 위해 나온 변수 선언 방식이

바로 let과 const입니다.

 

아래의 예시를 보시죠.

if (true) {
  let a = 0;
}
console.log(a);
// Uncaught ReferenceError: a is not defined

let a = 1;
let a = 2;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared

if (true) {
  const b = 0;
}
console.log(b);
// Uncaught ReferenceError: b is not defined

const b = 1;
const b = 2;
console.log(b);
// Uncaught SyntaxError: Identifier 'b' has already been declared

var와 다르게 let과 const는 블록 레벨 스코프를 가지고 있어

위와 같이 블록을 벗어나자 변수를 찾을 수 없다는 오류가 출력되고,

중복 선언 시에는 먼저 선언된 변수가 있다는 오류가 출력됩니다.

 

이 두 선언 방식의 차이점은 한 가지입니다.

let으로 선언된 변수는 재할당이 가능한 변수이고,

const로 선언된 변수는 재할당이 불가능한 변수라는 점입니다.

let a = 0;
a = 1;
console.log(a); // 1

const b = 0;
b = 1;
console.log(b); // Uncaught TypeError: Assignment to constant variable.

 

2. 그렇다면 언제 어떻게 사용해야 할까?

const로 객체나 배열을 할당 시에도 객체와 배열 내부의 값은 바꿀 수 있어, 재할당하는 경우는 사실 흔하지 않습니다.

또한 const는 의도치 않은 재할당을 방지해주기 때문에 var와 let보다 안전합니다.

재할당이 필요한 변수에 한정해 let을 사용하는 것이 적합하며,

거의 대부분의 경우에 const를 사용하는 것이 적합합니다.

 

정리해보자면

• ES6 이상의 환경이라면 var는 사용하지 않는다.
• const를 기본으로 사용하되, 재할당이 필요한 경우에만 한정해 let을 사용하자.

 

 

아래는 Google JavaScript Style Guide 문서에서 발췌한 내용인데

Google에서도 변수 선언 시 같은 방법을 기본으로 하고 있다고 합니다.

Use const and let
Declare all local variables with either const or let. Use const by default, unless a variable needs to be reassigned. The var keyword must not be used.

>> const 또는 let을 사용하여 모든 지역 변수를 선언합니다.
>> 변수를 재할당해야 하는 경우가 아니라면 기본적으로 const를 사용합니다. var는 사용하지 않습니다.

 

ref. https://google.github.io/styleguide/jsguide.html#features-use-const-and-let