[JavaScript] var의 문제점

var의 문제점

1. 정의된 변수가 함수 스코프(scope)를 가진다.

스코프란 변수가 사용될 수 있는 영역을 말하며, 변수가 정의된 위치에 의해서 결정된다.

function example() {
  // var 키워드로 정의된 변수는 함수 스코프이기 때문에 함수를 벗어난 영역에서 사용하면 에러가 발생한다.
  var i = 1;  
}

console.log( i );  // 에러 발생

 

2. var 변수를 함수 안이 아닌 프로그램의 가장 바깥에 정의하면 전역 변수가 된다.

함수 안에서 var 키워드를 사용하지 않고 변수에 값을 할당하면 전역 변수가 된다.

function example1() {
  i = 1;
}

function example2() {
  console.log( i );
}

example1(); // example1에서 넣었던 값이
example2(); // example2에서 출력된다.

 

이렇게 전역 변수가 되는 것을 피하기 위해 파일의 최상단에 'use strict'를 선언할 수 있다.

'use strict';

function example1() {
  i = 1;  // 에러 발생
}

function example2() {
  console.log( i );
}

example1();
example2();

 

3. 반복문에서 정의된 변수가 반복문이 끝난 이후에도 계속 남아 있다.

for문, while문, switch문, if문 등 함수 내부에서 작성되는 모든 코드가 계속 남아 있는 문제가 있다.

for (var i = 0; i < 10; i++) {
  console.log(i);
}

console.log('last:', i);

// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// last: 10

 

위와 같이 for문이 끝난 이후에도 for문 안에 선언했던 i변수 값을 읽을 수 있다.

var 변수의 스코프를 제한하기 위해 즉시 실행 함수를 사용하기도 한다.

즉시 실행 함수는 함수를 정의하는 시점에 바로 실행하고 사라지는 함수다.

var변수는 함수 스코프이므로 즉시 실행 함수로 묶으면 변수의 스코프를 제한할 수 있다.

(function () {
  for (var i = 0; i < 10; i++) {
    console.log(i);
  }
})();

console.log('last:', i); // 에러 발생

 

4. 호이스팅(hoisting)

호이스팅은 var 키워드로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려지는 것을 말한다.

console.log(myVar);
var myVar = 1;

 

위와 같이 변수를 정의하기 전에 사용해도 에러가 발생하지 않는다.

 

해당 변수의 정의가 위쪽으로 끌어올려졌기 때문이다.

이전에 봤던 코드가 아래와 같이 변경됐다고 생각하면 이해하기 쉽다.

var myVar = undefined;
console.log(myVar);
myVar = 1;

 

위와 같이 변수 정의가 위로 끌어올려진 것이다. 

 

특이한 점은 console.log에 입력된 값이 1이 아니라 undefined가 입력된다.

var로 선언한 변수는 이렇게 호이스팅 된 후에 undefined가 할당이 된다. 

 

실제 값은 원래 정의했던 그 위치에서 할당이 되는 것이다.

특이하게도 변수가 정의된 곳 위에서 값을 할당할 수도 있다.

console.log( myVar );
myVar = 2;
console.log( myVar );
var myVar = 1;

버그처럼 보이는 위 코드가 에러 없이 사용될 수 있다는 것은 단점이라고 할 수 있다. 

 

이처럼 호이스팅은 직관적이지 않으며 보통의 프로그래밍 언어에서는 찾아보기 힘든 기능이다.

 

5. var를 이용하면 한번 정의된 변수를 재정의 할 수 있다.

var myVar = 1;
var myVar = 2;

 

위와 같은 코드가 에러 없이 사용될 수 있다는 것은 직관적이지 않으며 버그로 이어지기 쉽다.

 

6. 재할당 가능한 변수로 밖에 만들 수 없다.

var PI = 3.141592;
PI = 123;

 

위 예시처럼 상수처럼 쓰일 값도 무조건 재할당 가능한 변수로 만들어진다.