var, let, const 차이점

개요

자바스크립트는 ES6 문법이 새로 추가되면서 다양한 새로운 기능들이 나오게 되었는데요.
그중의 하나가 바로 let과 const입니다.
let과 const가 그동안 사용해온 var과 어떤 차이점이 있는지 알아보겠습니다.

---

var

ES6 문법이 나오기 전까지 var로 변수를 선언하는 것이 룰이었는데요. var은 변수 선언과 관련하여 문제가 있습니다. 이것이 바로 변수 선언의 새로운 방법이 필요했던 이유입니다.

var 변수가 함수 외부에 선언될 때 범위는 글로벌스코프입니다. 즉, 함수 블록 외부에 var로 선언된 변수는 전체에서 사용 가능합니다. var는 함수 내에서 선언될 때 함수의 범위를 지정합니다.

var coder = "hey hi";

function newFunction() {
  var hello = "hello";
}

여기서 coder는 글로벌스코프인 반면, hello는 함수 내부에 존재하기 때문에 함수 내부에서만 기능을 합니다.

만약 이렇게 하면,

var coder = "hey hi";

function newFunction() {
  var hello = "hello";
}
console.log(hello); // error: hello is not defined

hello는 함수 내에서 선언된 것이기 때문에 오류가 발생합니다.

var 변수 재할당, 재선이 가능하다.

동일한 범위 내에서 var 변수를 다시 지정하고 재선언 할 수 있습니다.

var coder = "hey hi";
var coder = "say Hello instead";

이렇게도 가능합니다.

var coder = "hey hi";
coder = "say Hello instead";

var 호이스팅

호이스팅은 변수와 함수 선언이 코드 실행 전에 해당 범위의 맨 위로 끌어올리는 것을 말합니다.

console.log(coder);
var coder = "say hello";

이를 다음과 같이 해석합니다.

var coder;
console.log(coder); // coder is undefined
coder = "say hello"

따라서 var 변수는 범위의 맨 위로 끌어올려지고 정의되지 않은 값으로 초기화됩니다.

var의 문제점

var coder = "hey hi";
var times = 4;

if (times > 3) {
  var coder = "say Hello instead"; 
}
    
console.log(coder) // "say Hello instead"

times가 3보다 큰 4로 true이기 때문에 coder는 "say Hello instead"으로 재정의됩니다.

coder를 다시 정의하려는 경우에는 문제가 되지 않지만, 변수 coder가 이전에 이미 정의되어 있다는 것을 깨닫지 못하는 경우에는 문제가 됩니다.

코드의 다른 부분에 coder를 사용한 경우 생각지도 못한 결과에 놀랄 수 있습니다. 이로 인해 코드에 많은 버그가 발생할 수 있습니다. 이것이 바로 let과 const가 필요한 이유입니다.

let

let은 방금 다루었던 var 문제를 해결할 수 있습니다.

let은 블록 스코프

블록은 { }에 의해 경계가 지정됩니다. { }안에 있는 것은 모두 블록입니다.
let을 사용하여 블록에 선언된 변수는 해당 블록 내에서만 사용할 수 있습니다.

let coder = "say Hi";
let times = 4;

if (times > 3) {
  let hello = "say Hello instead";
  console.log(hello);// "say Hello instead"
}
console.log(hello) // hello is not defined

블록 외부에서 hello를 사용하면 오류가 반환됩니다. 그 이유는 변수가 블록 범위로 지정되기 때문입니다.

let은 변수 재할당이 가능하지만 재선언 불가하다.

let coder = "say Hi";
coder = "say Hello instead";

이렇게 하면 오류가 반환됩니다.

let coder = "say Hi";
let coder = "say Hello instead"; 
// error: Identifier 'coder' has already been declared

만약 동일한 변수가 서로 다른 범위에서 정의되어 있으면 오류가 발생하지 않습니다.

let coder = "say Hi";
if (true) {
  let coder = "say Hello instead";
  console.log(coder); // "say Hello instead"
}
console.log(coder); // "say Hi"

오류가 발생하지 않는 이유는 동일한 변수여도 범위가 다르기 때문에 서로 다른 변수로 취급되기 때문입니다.

const

const로 선언된 변수는 const 값을 유지합니다.

const 블록 스코프

let 선언과 마찬가지로 선언된 블록 내에서만 선언에 사용할 수 있습니다.

const는 재선언과 재할당이 불가하다.

const로 선언된 변수의 값은 해당 범위 내에서 동일하게 유지됩니다. 재할당하거나 재선언할 수 없습니다.

const coder = "say Hi";
coder = "say Hello instead"; // error: Assignment to constant variable. 

const coder = "say Hi";
const coder = "say Hello instead"; // error: Assignment to constant variable.