Javascript의 var / let / const 의 스코프와 재할당 가능 여부

자바스크립트(Javascript)에서 변수를 선언하는 키워드에는 var, let, const가 있습니다.

 

각각의 키워드는 모두 변수를 선언하는 것은 동일하지만, 스코프(scope), 호이스팅(hoisting), 재할당 가능 여부의 차이를 가지고 있습니다. 본 글에서는 이 세 가지 변수 선언을 위한 키워드의 차이점을 소개합니다.

 

스코프(Scope)

스코프는 변수가 코드 내에서 접근 가능한 범위를 의미합니다. var, let, const는 각각 아래와 같은 스코프를 가집니다.

• var: 함수 레벨 스코프(function-level scope)
• let: 블록 레벨 스코프(block-level scope)
• const: 블록 레벨 스코프(block-level scope)

블록 레벨 스코프(block-level scope)를 가진다는 것은, 변수가 선언된 {}(중괄호) 내에서만 접근 가능하다는 의미

 

if (true) {
    var varVariable = "전체 함수에서 접근 가능";
    let letVariable = "해당 블록 내에서만 접근 가능";
}

console.log(varVariable); // "전체 함수에서 접근 가능"
console.log(letVariable); // Uncaught ReferenceError: letVariable is not defined

 

호이스팅(Hoisting)

호이스팅은 자바스크립트의 특성중 하나로, var로 선언된 변수의 선언부가 가장 상단으로 올려지는것을 말합니다. var로 선언된 변수는 선언부가 가장 상단으로 올려지지만, 할당은 끌어올려지지 않습니다.

 

반면, let과 const는 호이스팅이 되지만, TDZ(Temporal Dead Zone)로 인해 선언 전에 접근하려 하면 오류가 발생합니다.

 

console.log(varVariable); // undefined
var varVariable = "호이스팅 되었음";

console.log(letVariable); // Uncaught ReferenceError: letVariable is not defined
let letVariable = "호이스팅은 되었지만, TDZ 때문에 에러 발생";

 

재할당과 재선언

var, let, const는 각각 아래와 같은 특성을 같습니다.

• var: 같은 스코프 내에서 재선언과 재할당이 가능
• let: 재할당은 가능하지만, 재선언은 불가능
• const: 재선언과 재할당 모두 불가능

 

var varVariable = "처음 선언";
varVariable = "재할당 가능";
var varVariable = "재선언 가능";

let letVariable = "처음 선언";
letVariable = "재할당 가능"; 
let letVariable = "재선언 불가능"; // Uncaught SyntaxError: Identifier 'letVariable' has already been declared

const constVariable = "상수 선언";
constVariable = "재할당 불가능"; // Uncaught TypeError: Assignment to constant variable.

 

결론

var, let, const 주요 차이점을 이해하는 것은 변수의 접근성, 보안, 그리고 코드의 예측 가능성을 향상시키는 데 중요합니다. var는 가능한 한 피하는 것이 좋으며, 대부분의 경우 let과 const의 사용하는 것이 좋습니다.

 

관련 글

JavaScript ES6에서 추가된 map(), filter(), reduce() 이해하기