[JavaScript] var, let, const 키워드 차이

JavaScript에서 변수를 선언할 때 사용할 수 있는 키워드로는 ① var, ② let, ③ const가 있습니다. 

 

① var 키워드

ES6이 발표되기 전까지는 var 키워드를 사용해서 변수를 선언하는 것이 일반적이었습니다. var 키워드는 크게 3가지 특징을 가지고 있습니다.

1) var 키워드는 함수 레벨 스코프를 가지고 있기 때문에, 변수가 함수 외부에서 선언되었다면 무조건 전역 변수가 됩니다.

var ex_global = "Global Scope Variable";

function newFunction() {
    var ex_func = "Function Scope Variable";
}
console.log(ex_func); // error: ex_func is not defined

 

2) 변수의 재선언과 재할당을 허용합니다. 

var ex_redeclare1 = "Red";
var ex_redeclare1 = "Blue"; // ( O )

var ex_reassign1 = "Apple";
ex_reassign1 = "Banana"; // ( O )

 

3) 변수가 선언되기 전에 변수를 참조한다면, 호이스팅으로 인해서 오류가 발생하지 않고 undefined 값을 반환합니다. 

// Actual Code
// console.log (greeter);
// var greeter = "say hello";

// Interpreted Code
var ex_hoist;
console.log(ex_hoist); // ex_hoist is undefined
ex_hoist = "Hello";

 

이러한 특징들을 이해하고 의도대로 사용할 수 있습니다. 하지만 코드가 복잡해지고 길어지면, var 키워드로 선언된 변수는 의도하지 않은 결과들을 발생시킬 확률을 높이게 됩니다. 같은 이름의 변수를 다른 범위에서 사용하고 싶어도 전역 변수이어서 사용을 못하거나, 실수로 변수의 값을 변경시킬 수도 있습니다. 선언되기 전에 변수를 참조하면 undefined를 뱉어내는 것보다 오류를 발생시키는 것이 바람직할 수 있습니다. 

 

이러한 불편한 점을 해결하기 위해서 let 키워드와 const 키워드가 소개되었습니다.

 

② let 키워드

let 키워드는 블록 레벨 스코프를 가집니다. 중괄호 { }로 구분된 코드 블록 단위로 범위가 구분되기 때문에 코드 블록 내부에서 선언된 변수는 지역 변수 취급을 받아 블록 외부에서는 참조할 수 없게 됩니다. 

변수의 재할당은 허용하지만 재선언은 허용하지 않습니다. 만약 같은 범위에서 똑같은 변수를 재선언하려고 시도하면 오류가 발생하게 됩니다. 

let ex_redeclare2 = "Red";
let ex_redeclare2 = "Blue"; // error: Identifier 'ex_redeclare2' has already been declared

let ex_reassign2 = "Apple";
ex_reassign2 = "Banana"; // ( O )

let 키워드는 var 키워드와 달리 호이스팅이 되지 않는다는 오해가 있지만, 호이스팅은 공통적으로 모두 발생합니다. 단, let 키워드로 선언한 변수는 호이스팅이 되었을 때 undefined로 초기화되지 않는다는 차이점이 있습니다. 따라서 선언하기 전에 let 변수를 사용한다면 참조 오류(Reference Error)가 발생하게 됩니다.

*변수의 선언과 초기화 사이인, 변수를 참조할 수 없는 구간은 TDZ(Temporal Dead Zone)이라고 합니다.

 

③ const 키워드

const 키워드는 let 키워드와 마찬가지로 블록 레벨 스코프를 가지며, 호이스팅이 되었을 때 초기화되지 않습니다. 

let 키워드와의 차이점은 const 키워드는 재할당과 재선언을 모두 허용하지 않는다는 것입니다. 

let ex_redeclare3 = "Red";
let ex_redeclare3 = "Blue"; // error: Identifier 'ex_redeclare3' has already been declared

let ex_reassign3 = "Apple";
ex_reassign3 = "Banana"; // error: Assignment to constant variable.

 

하지만 const 키워드를 통해 객체를 선언한 경우, 객체(Object)의 속성 값을 업데이트를 할 수는 있습니다.

const ex_object = {
    word: "Morning",
    number: 20
}

ex_object = {
    word: "Afternoon",
    number: 25
} // error:  Assignment to constant variable.

ex_object.name = "Night"; // ( O )

 

 

※ 어떠한 키워드 없이도 변수 선언을 할 수도 있습니다. 이 경우, 변수가 자동으로 전역변수로 선언이 됩니다.