본문 바로가기
프로그래밍/JavaScript

JavaScript에서 var, let, const의 차이점

by 꾸션 2023. 3. 12.

JavaScript에서 변수를 선언하는 키워드로는 var, let, const가 있습니다. ES6에서 새로 추가된 let과 const 키워드는 var 키워드와 다른 특징을 가지고 있습니다. 이번 글에서는 let과 const 키워드가 var 키워드와 어떻게 다른지에 대해 알아보겠습니다.

 

1. 변수 스코프

var 키워드로 선언한 변수는 함수 스코프(Function scope)를 가집니다. 함수 내에서 선언된 변수는 함수 내부에서만 유효합니다. 하지만 let과 const 키워드로 선언한 변수는 블록 스코프(Block scope)를 가집니다. 블록 스코프란 중괄호({})로 둘러싸인 범위를 의미합니다. 따라서 블록 내에서 선언된 변수는 블록 내부에서만 유효합니다.

 

2. 변수 재할당

var 키워드로 선언한 변수는 재할당이 가능합니다. 하지만 let과 const 키워드로 선언한 변수는 재할당이 불가능합니다. const 키워드로 선언한 변수는 상수(Constant)로 취급되어 값의 변경이 전혀 불가능합니다.

var x = 1;
x = 2; // x값이 재할당됨

let y = 1;
y = 2; // y값이 재할당됨

const z = 1;
z = 2; // TypeError: Assignment to constant variable.

 

3. 호이스팅(Hoisting)

var 키워드로 선언한 변수는 변수의 선언이 코드의 맨 위로 끌어올려지는 현상인 호이스팅이 발생합니다. 하지만 let과 const 키워드로 선언한 변수는 호이스팅이 발생하지 않습니다. 따라서 변수를 사용하기 전에 반드시 선언해야 합니다.

console.log(x); // undefined
var x = 1;

console.log(y); // ReferenceError: y is not defined
let y = 1;

위와 같이 var 키워드로 선언한 변수는 호이스팅으로 인해 변수의 값이 undefined로 출력됩니다. 하지만 let과 const 키워드로 선언한 변수는 호이스팅으로 인해 ReferenceError가 발생합니다. 따라서 let과 const 키워드를 사용할 때는 변수를 먼저 선언한 후에 사용해야 합니다.

 

4. 전역 객체

var 키워드로 선언한 변수는 전역 객체(Global Object)에 바인딩됩니다. 하지만 let과 const 키워드로 선언한 변수는 전역 객체에 바인딩되지 않습니다. 이는 전역 변수를 최대한 사용하지 않도록 권장하는 JavaScript의 안전한 코딩 관행에 부합합니다.

var x = 1;
console.log(window.x); // 1

let y = 1;
console.log(window.y); // undefined

 

5. 선언 시점

var 키워드로 선언한 변수는 선언과 동시에 초기화되지만, let과 const 키워드로 선언한 변수는 선언과 동시에 초기화되지 않습니다. 따라서 선언 이후에 변수에 값을 할당해야 합니다.

console.log(a); // ReferenceError: a is not defined
let a = 1;

위와 같이 let과 const 키워드로 변수를 선언하면 선언 전에 변수에 접근하려고 하면 ReferenceError가 발생합니다.

 

let과 const 키워드는 var 키워드와 비교하여 다양한 장점을 가지고 있습니다. 변수의 스코프와 재할당 가능 여부를 명확하게 구분하여 코드의 가독성과 안전성을 높이는데 도움이 됩니다. 따라서 프로젝트에서 변수를 선언할 때는 let과 const 키워드를 우선적으로 고려하는 것이 좋습니다.

반응형

댓글