[JS] 실전 자바스크립트 - var의 문제점

CREWD·2021년 3월 1일

실전 자바스크립트

스코프란 변수가 사용될 수 있는 영역을 말한다.

스코프는 변수가 정의된 위치에 의해서 결정된다.

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

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

함수안에서 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();

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); // 에러 발생

호이스팅은 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;

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

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

var myVar = 1;
var myVar = 2;

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

var PI = 3.141592;
PI = 123;

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

...