Blog

자바스크립트에서의 변수 선언: var와 let의 차이점

자바스크립트는 다양한 변수 선언 방식을 제공합니다. 그중에서도 var와 let는 가장 많이 사용되는 키워드로, 두 가지 사이에는 여러 가지 중요한 차이점이 존재합니다. 이해하기 쉽게 정리해보면, 이들 각각의 특성과 작동 방식에 따라 프로그래밍 코드의 안전성과 안정성이 달라질 수 있습니다.

1. 중복 선언 가능 여부

var를 사용하여 변수를 선언할 경우, 같은 이름으로 중복해서 선언하는 것이 가능합니다. 실제로 아래와 같은 코드에서:

var name = 'Alice';
var name = 'Bob';

이 경우, name 변수는 마지막에 선언된 값인 ‘Bob’을 참조하게 됩니다. 이는 결국 이전에 선언한 변수의 값이 잃어버릴 수 있다는 단점으로 이어집니다.

반면 let은 중복 선언을 허용하지 않기 때문에, 동일한 변수를 다시 선언하려 하면 오류가 발생합니다. 예를 들어:

let age = 30;
let age = 25; // SyntaxError 발생

이처럼 let을 사용함으로써 코드의 안전성을 높일 수 있습니다.

2. 재할당 가능 여부

두 키워드 모두 값의 재할당이 가능합니다. 즉, 아래와 같은 방식으로 각각의 변수를 새롭게 정의할 수 있습니다:

var counter = 1;
counter = 2; // 성공적으로 재할당

let score = 100;
score = 200; // 성공적으로 재할당

하지만 const와 같은 상수 변수는 재할당이 불가능하여, 초기화 후에는 값을 변경할 수 없습니다.

3. 변수의 스코프 유효 범위

여기서 가장 큰 차이점 중 하나는 스코프, 즉 변수가 유효한 범위에 관한 것입니다. var로 선언된 변수는 함수 레벨 스코프를 가지며, 이는 해당 변수가 선언된 함수 내부에서만 유효하다는 것을 의미합니다. 예를 들어:

function example() {
  var temp = 'Hello';
  console.log(temp); // Hello
}
console.log(temp); // ReferenceError 발생

하지만 let은 블록 레벨 스코프를 가지므로, 변수를 선언한 블록 내에서만 유효합니다. 아래의 코드와 같이:

if (true) {
  let message = 'World';
  console.log(message); // World
}
console.log(message); // ReferenceError 발생

따라서 let을 사용하면 코드의 가독성이 증가하고 의도치 않은 변수 간섭을 방지할 수 있습니다.

4. 변수 호이스팅의 차이

변수 호이스팅이란 변수가 선언되기 전에도 사용할 수 있는 자바스크립트의 독특한 동작 방식입니다. var로 선언된 변수는 호이스팅이 발생하여, 선언 앞에서도 접근할 수 있습니다. 간단한 예시를 보겠습니다:

console.log(a); // undefined
var a = 10;

여기서 변수 a는 호이스팅으로 인해 초기화되지 않은 상태로 참조되며, 결과적으로 undefined를 출력합니다.

반면에 let으로 선언된 변수는 호이스팅이 발생하지만, 초기화 전에는 사용할 수 없습니다. 즉, 다음과 같은 코드는

console.log(b); // ReferenceError 발생
let b = 20;

이렇게 사용할 경우 에러가 발생하게 되어, 변수의 안전성을 더욱 높여줍니다.

5. 전역객체 프로퍼티 여부

마지막으로, var로 선언된 변수는 전역 객체의 프로퍼티가 됩니다. 예를 들어, 브라우저 환경에서 var로 선언한 변수를 확인하면:

var globalVar = 'I am global';
console.log(window.globalVar); // 'I am global'

이와 달리 let으로 선언한 변수는 전역 객체의 프로퍼티가 되지 않습니다:

let localVar = 'I am local';
console.log(window.localVar); // undefined

이 점은 변수가 전역 객체와 연관되어야 하는지 여부에 따라 선택할 수 있게 해줍니다.

결론

결국, 자바스크립트에서 var와 let의 선택은 코드의 안정성, 가독성 및 유지 관리 측면에서 큰 영향을 미칠 수 있습니다. var는 여전히 유효하지만, let을 활용하는 것이 더 많은 장점을 제공합니다. 그러므로 새로운 코드에서는 let 또는 const를 사용하는 것이 바람직하며, 특히 변수의 재할당 없이 처리가 가능한 경우 const를 기본적으로 선택하는 것이 좋습니다.

이러한 이해를 통해 자바스크립트 코드를 작성할 때, 보다 안전하고 명확한 방식을 취할 수 있게 될 것입니다.

자주 찾는 질문 Q&A