자바스크립트에서 더이상 var를 사용하지 않는 4가지 이유

Skills/Javascript

Homil-Rye 2025. 6. 22. 18:16

728x90

자바스크립트에서 변수 선언 시 var 대신 let과 const를 사용하는 것이 현대적인 개발 방식으로 자리잡은 지 오래되었습니다.

그 이유는 단순한 문법 취향의 문제가 아니라, 실제로 코드의 안정성과 예측 가능성을 크게 향상시키기 때문입니다.

본 글에서는 var가 왜 지양되어야 하는지, 대표적인 네 가지 이유를 통해 설명드립니다.

1. 함수 스코프만 있고 블록 스코프가 없음

var는 함수 스코프를 따르며, 블록 스코프를 지원하지 않습니다. 이는 if, for, while 등 블록 내부에서 선언한 변수라도 해당 블록 외부에서 접근이 가능하다는 뜻입니다.

function example() {
  if (true) {
    var message = 'hello';
  }
  console.log(message); // 출력: hello
}

이처럼 의도치 않게 범위 밖에서도 변수에 접근이 가능해지며, 이는 예기치 않은 버그를 유발할 수 있습니다. 반면 let과 const는 블록 스코프를 지원하여, 선언된 블록 내에서만 유효합니다.

var로 선언된 변수는 선언부가 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 호이스팅(Hoisting) 특성을 가집니다. 이로 인해 선언 전에 변수를 참조해도 undefined가 반환되어, 런타임 오류 없이 버그가 숨어들 가능성이 높습니다.

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

이는 실제로는 다음과 같은 순서로 동작합니다.

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

let과 const도 호이스팅되지만, 선언 전까지는 일시적 사각지대(Temporal Dead Zone, TDZ)에 놓여 접근할 수 없기 때문에 이러한 오류를 방지할 수 있습니다.

var는 동일한 스코프 내에서 같은 이름의 변수를 중복 선언할 수 있습니다. 이로 인해 기존 변수가 무의식적으로 덮어씌워져 예기치 않은 동작이 발생할 수 있습니다.

var count = 1;
var count = 2;
console.log(count); // 출력: 2

반면 let과 const는 같은 스코프 내에서 중복 선언 시 SyntaxError를 발생시켜 이러한 문제를 사전에 방지합니다.

let과 const는 선언 전에 해당 변수에 접근할 수 없는 일시적 사각지대(TDZ)가 존재합니다. 이 구간에서는 변수가 아직 초기화되지 않았기 때문에 접근 시 ReferenceError가 발생합니다.

console.log(num); // ReferenceError
let num = 3;

반면 var는 TDZ 없이 곧바로 undefined로 초기화되기 때문에 실수로 선언 전에 접근하더라도 오류가 발생하지 않으며, 이는 버그가 눈에 띄지 않게 만들 수 있습니다.

var는 과거에는 표준적인 변수 선언 방식이었지만, 블록 스코프 미지원, 호이스팅, 중복 선언 허용 등으로 인해 예측 가능한 코드를 작성하기 어렵게 만듭니다.

이러한 문제들을 보완한 let과 const가 등장한 이후로, 현대 자바스크립트에서는 var의 사용을 지양하는 것이 일반적인 권장 사항입니다.

변경 가능한 변수에는 let, 변경이 불필요한 상수에는 const를 사용하는 것이 명확하고 안전한 코드 작성을 위한 기본 원칙입니다.

728x90