JavaScript에서 var를 사용하면 안되는 이유

var

var는 ES6 등장 이전에 사용되던 키워드이며, 변수를 생성할 때 앞에 붙여서 변수임을 명시합니다.
그러나 이는 개발에 있어서 엄청 큰 단점을 가지고 있어 현재에는 거의 사용하지 않습니다. (사용하면 안됩니다..)

먼저 아래 코드를 봅시다.

var a = 123;
console.log(a); // 123

var a = 567;
console.log(a); // 567

a가 2번 선언되었음에도 불구하고, 오류는 발생하지 않았습니다.

만약 방대한 프로젝트를 개발한다면 똑같은 이름의 변수를 몇 번이나 사용해도 오류는 발생하지 않으니, 로직 상의 오류는 빈번해질 것이고 그 오류를 발견하기는 또 굉장히 어렵게 될 것입니다.

그런데, 왜 이런 현상이 나타나는 것일까요?
그 이유는 바로 Hosting(호이스팅) 때문입니다.

호이스팅?

var 키워드를 사용하여 변수 선언 시, 해당 변수의 선언부를 스코프 최상단으로 올려버리는 것을 말합니다.
JavaScript의 변수 생성과 초기화의 작업이 분리되어 진행되기 때문에 이런 현상이 발생한다.

var는 우리가 기존 C나 Java의 Block-scoped가 아니라 Function-scoped입니다. 따라서, 코드 전체의 최상단이 아닌 함수 내부의 최상단으로 이동합니다. 아래 예시를 봅시다.

Function-scoped는 중괄호로 구분된 영역의 범위를 갖는 것이 아니라, 함수 내부의 영역을 범위로 갖는 것을 의미합니다.

var a = 123;
function func() {
  console.log(a); // undefined
  var a = 456;
  console.log(a); // 456
}
func();

이 코드는 var의 호이스팅에 의해 아래와 같이 인식됩니다.

var a = 123;
function func() {
  var a;
  console.log(a); // undefined
  a = 456;
  console.log(a); // 456
}
func();

호이스팅 떄문에 a를 참조할 Reference는 있으니 Reference Error는 나지 않고, 대신 undefined라는 값이 출력됩니다.

참고로 undefined는 JavaScript의 Primitive Value로 어떠한 값도 할당되지 않아 자료형이 정해지지 않은 상태를 의미합니다.

그래서 var의 문제점은..?

변수의 중복 선언이 가능하다.

글의 최상단에서 설명한 예시를 통해 알 수 있듯이, var는 a라는 이름의 변수가 있음에도 불구하고 또 그 아래에서 a라는 이름의 변수를 선언할 수 있습니다.

이처럼 이미 선언했던 변수명을 모르고 또 사용할 경우, 기존에 있던 변수는 전혀 다른 값을 가지게 됩니다. 그 경우, 그 변수를 사용하는 다양한 로직들에 치명적인 문제가 생깁니다.

for문에서의 문제점

ar는 Function-scoped이기 때문에 for문에서 for문의 순회를 위해 i라는 변수를 var로 선언한 경우, 이 변수는 for문이 종료되어도 접근이 가능하게 됩니다.

또한, 만약 for문의 함수 내부가 아닌, 함수 외부에 전역적으로 돌아갈 경우 for문에서 사용한 var 변수들은 전역 변수로서 역할을 하므로, 전역 변수가 남발될 수 있습니다.