[자바스크립트] var 키워드를 사용하지 말아야 하는 이유

자바스크립트에서 변수를 선언하는 방법으로는 var, const, let 3가지 키워드가 있다.

사실 EcmaScript5 전까지는 var 키워드만 존재했으며 이후로 const, let이 추가된 것이다.

이 var 키워드는 독특한 특징들이 있어 사용에 주의해야 한다.

 

var 키워드를 왜 사용하면 안될까?

1. 동일한 식별자를 중복 선언할 수 있다.

    var a = 1;
    var b = 1;

    ...

    var a = 100;
    console.log(a, b); // 100 1

위 코드와 같이 동일한 이름의 변수를 선언해도 에러가 발생하지 않는다.

 

의도치 않게 이미 선언했던 중요한 변수 값이 변경되어 심각한 문제를 일으킬 수 있다.

 

 

2. 함수 레벨의 스코프를 가진다.

변수는 항상 스코프를 가지는데, var 키워드로 선언한 변수는 함수의 코드 블록(함수에 달린 {}) 만을 지역 스코프로 인정한다.
따라서 var 키워드로 선언한 변수가 함수가 아닌 다른 위치에서 선언되었다면 모두 전역 스코프를 가진다.

 

    var a = 1;
    if(a === 1){
      var b = 2;
    }

    function func(){
      var c = 3;
      return;
    }

    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // undefined

다음과 같이 var는 오직 함수 코드 블록만을 지역 스코프로 삼는다.

 

결과적으로
a는 전역 변수가 되며,
b는 if 조건문 코드 블록 내에서 선언되었지만 전역 변수가 되며,
c는 함수 코드 블록 내에서 선언되었으므로 지역 변수가 된다.

 

var 키워드를 이용한 변수가 중복 선언됨을 고려하면 다음과 같은 문제가 발생할 수도 있다.

    var i = "BOOM!";

    console.log("countdown"); // countdown
    for(var i=3; i>0; i--){
      console.log(i);
    }    // 3 2 1

    console.log(i); // 0

의도한 3 2 1 BOOM! 코드가 3 2 1 0 으로 동작할 수도 있다.

 

 

3. 호이스팅 발생

호이스팅이란?

코드가 실행되기 이전에 변수들의 선언이 스코프의 선두로 끌어올려진 것 처럼 동작하는 현상이다.

 

코드를 실행하면, 최상단에 변수가 선언된 것 처럼 동작한다는 것이다.

    console.log(a); // undefined

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

첫 코드가 실행되기 이전에, 호이스팅에 의해 이미 a 변수가 선언이 되었다.
변수가 선언이 될 때 undefined로 초기화 된다.

 

첫 줄 console.log를 실행하는 시점에서 a 변수는 호이스팅에 의해 선언이 되었으므로 undefined가 출력된다.

 

var a = 1; 코드를 만난 시점에서 변수 a에 값 1이 할당된다.
그 다음 console.log 에서는 1이 출력된다.

 

 

이와 같은 var 키워드의 단점을 보완하기 위해서 const와 let 키워드가 등장하게 되었다.

---

 

다음 글

 

[자바스크립트] let, const 키워드