[JavaScript] var을 사용하지 않는 이유

자바스크립트에서 변수의 종류로는 var, let, const 세가지가 있지만 실제로 사용하는 것은 let과 const로 두가지밖에 없다. 자바스크립트를 공부하다 보면서, var을 사용하지 않는 이유가 궁금했기 때문에 이에 대해서 정리해 보았다.

⁉️var과 let, const의 차이점

function scopeTest() {
  if (true) {
    var a = "var";
    let b = "let";
  }

  console.log(a); // ✅ 출력: "var"
  console.log(b); // ❌ ReferenceError: b is not defined
}

scopeTest();

var은 함수 스코프(function scope)로, 함수 전체에서 접근할 수 있지만 if, for 같은 블록을 구분하지 않는다.
let은 블록 스코프(block scope)로, 해당 블록'{}' 안에서만 접근할 수 있다.

var name = "자바를 잡아";
var name = "자바스크립트"; // 기존의 name을 덮어씀
console.log(name); // ✅ 출력: "자바스크립트"

let age = 17;
// let age = 18; // ❌ SyntaxError: Identifier 'age' has already been declared

var은 같은 스코프 안에서 변수를 중복 선언하는 것이 가능하지만 let과 const의 경우에는 같은 스코프 안에서 변수 중복 선언이 불가능해서 var에 비해 안전하다. 하지만 의도치않게 변수가 덮어씌여지는 것을 방지하기 위해 var은 사용되지 않는다.

호이스팅 시에 var은 undefined로 초기화 되지만, let과 const의 경우 호이스팅은 되지만 일시적 사각지대로 선언 전에 접근할 시 에러가 발생한다.

☎️ 호이스팅

💡 호이스팅이란 자바스크립트에서 변수나 함수의 선언이 코드 최상단으로 끌어 올리는 현상을 뜻한다.

console.log(name); // undefined
var name = "햄스터";

해당 코드는 변수의 선언이 우선적으로 읽히게 되며, 값을 할당하는 순서는 그대로 있기 때문에 undefined가 출력된다.

console.log(age); // ❌ ReferenceError!
let age = 20;

• let과 const는 호이스팅은 가능하지만, 선언하기 전에는 절대 접근하지 못한다.
• 선언하기 전, 접근하지 못하는 기간을 일시적 사각지대(TDZ)라고 한다.
• 이 덕분에 const와 let은 var에 비해 엄격하며 실수를 방지에 도움이 된다.

🌟 결론

let과 const는 스코프, 중복 선언, 호이스팅 측면에서 더 안전하고 직관적이기 때문에, 현재 대부분의 개발자는 var 대신 let과 const만을 사용한다.