var 의 단점

모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 읽으며 정리했습니다.

 

함수 레벨 스코프: var 키워드는 함수 레벨 스코프를 가지고 있습니다. 이는 변수가 함수 내에서 정의되면 함수 내 어디에서든 접근할 수 있다는 의미입니다. 이로 인해 변수가 의도치 않게 함수 스코프를 벗어나 사용될 수 있으며, 이는 예상치 못한 부작용을 초래할 수 있습니다.

function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10이 출력됨
}

전역 변수 문제: **var**로 선언된 변수가 블록 스코프를 지원하지 않기 때문에 블록 내에서 선언된 변수도 함수 스코프에 속하게 됩니다. 이로 인해 블록 내에서 선언한 변수가 의도치 않게 전역 스코프에 변수를 누출시킬 수 있습니다.

if (true) {
  var y = 20;
}
console.log(y); // 20이 출력됨

ES6에서는 var 대신 **let**과 const 키워드를 사용하는 것이 권장됩니다. **let**과 **const**는 블록 스코프를 지원하고 함수 스코프의 단점을 해결합니다. 이를 통해 변수의 범위를 명확하게 지정하고 예기치 않은 문제를 방지할 수 있습니다.

function example() {
  if (true) {
    let x = 10;
  }
  console.log(x); // ReferenceError: x is not defined 오류 발생
}

if (true) {
  let z = 20;
}
console.log(z); // ReferenceError: z is not defined 오류 발생

따라서 ES6에서는 **var**의 단점을 해소하고 블록 스코프를 지원하는 **let**과 **const**를 사용하는 것이 좋습니다.