var, let, const의 차이

var, let, const는 자바스크립트에서 변수를 선언할 때 사용하는 키워드다. 오늘은 이 세 키워드에 대해서 알아보겠다.

var

var 키워드는 ES5(ECMAScript5)에서 도입되었으나 ES6에서 let과 const키워드가 도입되며 이제는 사용이 지양되는 키워드다.

var 키워드가 사용이 지양되는 이유는 "너무 자유롭고 유연하기 때문" 이다.

코드가 자유롭고 유연하다는 뜻은 사소한 오류 혹은 오차정도는 허용해준다는 것을 의미하며 이는 코드를 짤때 고려할 사항도 적어지고 사용하기 편리하다는 장점이 있다. 하지만 코드가 길어지고 로직이 복잡해질수록, 혹은 사소한 오차도 허용되지 않는 시스템일수록 이는 오히려 독이된다.

자세히 어떤 요인들로 인해 var 키워드의 사용이 지양되는지 알아보자.

1) 함수 스코프

var 키워드는 함수 스코프를 지원하기 때문에 블록 스코프를 형성하지 않는다. 즉 서로 다른 블록에 있는 변수도 참조가 가능하기 때문에 예상치 못한 값의 변경이 일어날 수 있다.

/* var */
var x = 10;
if (true) {
  var x = 0;
  console.log("Inner x = ", x); // 0
}
console.log("Outer x = ", x); // 0
/* let */
let x = 10;
if (true) {
  let x = 0;
  console.log("Inner x = ", x); // 0
}
console.log("Outer x = ", x); // 10=

2) 호이스팅

var, let, const 모두 호이스팅이 발생하여 undefined로 초기화 되지만, 선언문보다 변수의 호출이 먼저 등장할 경우 실행 결과에서 차이를 보인다.

console.log(var_variable); // undefined
var var_variable = 0;  

console.log(let_variable);  // ReferenceError
let let_variable = 0; 

console.log(const_variable); // ReferenceError
const const_variable = 0; 

var 키워드는 변수의 선언이 호출보다 늦게 등장해도 에러가 발생하지 않고 undefined가 출력된다.

변수의 호이스팅에 관해선 아래 링크에 짧게 정리해놨으니 읽어보면 좋을 것이다.

호이스팅이란?

3) 변수 재선언

var 키워드는 동일한 스코프 내에서 같은 변수명을 가진 변수의 선언을 허용한다. 이로 인해 예상치 못한 값의 충돌이 발생할 수 있다.

var x = 10;
console.log(x); // 10
var x = 20;
console.log(x); // 20

let

let 키워드는 블록 스코프를 지원한다. 또한 같은 스코프 내에서 동일한 변수명으로 재선언 할 수 없지만 값의 재할당은 허용한다.

let x = 10;
let x = 20; // SyntaxError: Identifier 'x' has aleady been declared

let x = 10;
x = 20; // 가능

아래코드는 let 키워드로 선언한 변수가 각각의 블럭에서 서로 다른 변수로 동작하고 있음을 보여준다.

let x = 10;
console.log(x); // 10
(function x_func() {
  let x = 20;
  console.log(x); // 20
  if (true) {
    let x = 30;
    console.log(x); // 30
  }
  console.log(x); // 20
})();
console.log(x); // 10

같은 코드를 var 키워드를 사용했을 때와 비교해보면 결과가 다른것을 알 수 있다. 그 이유는 위에서 말했듯 var 키워드는 블록 스코프를 형성하지 않기 때문에 아래 소스코드처럼 하나의 함수 내에선 동일한 변수로 동작한다. 따라서 if문에서 var x = 30이 실행되면 x_func함수 내에 있는 변수 x의 값도 30으로 바뀐다.

var x = 10;
console.log(x); // 10
(function x_func() {
  var x = 20;
  console.log(x); // 20
  if (true) {
    var x = 30;
    console.log(x); // 30
  }
  console.log(x); // 30
})();
console.log(x); // 10

const

const 키워드는 let 키워드와 마찬가지로 블록 스코프를 지원하고 동일한 스코프에 내에선 변수의 재선언이 불가능할 뿐만 아니라 값의 재할당도 금지한다.

const x; // SyntaxError
const x = 0; // 가능
x = 10; // TypeError

요약해보자면 아래와 같다.