[Javascript] var 키워드의 문제점과 호이스팅

ES5까지의 역사 - var

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다.

 

var 키워드의 특징이자 let, const가 나오게 된 근본적인 원인이 된 독특한 작동 방식을 알아보자.

 

변수 중복 선언

var 키워드는 중복 선언이 가능하다.

var x = 10;
console.log(x); // 10

var x = 20;
console.log(x); // 20

위 예제에서는 var 키워드로 x 변수를 중복 선언했다.

 

이렇게 중복 선언하게 되면 초기화문 유무에 따라 다르게 동작한다.

1. 초기화문이 있는 변수 선언문: 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. 즉, 새로운 값으로 기존 변수를 덮어쓴다.
2. 초기화문이 없는 변수 선언문: 자바스크립트 엔진은 이 선언문을 무시한다. 기존 변수는 그대로 유지된다.

// 1.
var y = 20;
console.log(y); // 20

// 2.
var y;
console.log(y); // 20

 

 

함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수 코드 블록만을 지역 스코프로 인정한다.

 

따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

if (true) {
    var x = 10;
}
console.log(x); // 10

for (var i = 0; i < 3; i++) {
    var y = i;
}

console.log(y); // 2

 

이미 선언된 전역 변수 y가 있으므로 중복 선언된다.

 

var 키워드는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다.

 

 

변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 최상단으로 끌어올려진 것처럼 동작한다.

 

변수 호이스팅으로 인해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.

 

그러나 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

a 변수는 var 키워드로 선언되었기 때문에 호이스팅된다.

 

 

함수 스코프 내에서의 호이스팅

함수 스코프 내에서도 동일하게 적용된다.

function foo() {
    console.log(b); // undefined
    var b = 20;
    console.log(b); // 20
}

foo();

foo 내의 변수 b도 호이스팅된다.

 

 

호이스팅에 관해

사실 호이스팅은 var 이외에도 ES6에서 생긴 let, const에서도 발생한다.

 

뿐만 아니라 함수 선언(function), 제너레이터 함수(function*), 클래스(class)에서도 호이스팅이 발생한다.

 

변수 호이스팅은 지금까지 다루었으므로 함수 호이스팅을 살펴보겠다.

 

 

함수 호이스팅

함수 선언은 변수 선언과 달리 전체 함수가 호이스팅된다.

 

따라서 함수 선언문 이전에 함수를 호출할 수 있다.

console.log(foo()); // "Hello, world!"

function foo() { 
    return "Hello, world!";
}

그래서 예제와 같이 함수 선언문 이전에 호출해도 정상적으로 출력할 수 있다.

 

 

클래스 호이스팅

클래스 선언도 호이스팅되지만, let과 const 처럼 호이스팅이 발생하지 않은 것처럼 동작한다.

 

일시적 사각지대가 적용되었다고 하는데, 다음 포스팅에서 더 자세하게 다루어보겠다.

let instance = new MyClass(); // Uncaught ReferenceError: MyClass is not defined
class MyClass;

 

 

제너레이터 함수 호이스팅

제너레이터 함수는 일반 함수와 달리 *(asterisk) 키워드를 사용하며, yield 키워드를 통해 함수 실행을 일시 중지하고 재개할 수 있다.

console.log(genFunc().next().value); // 1
function* genFunc() {
    yield 1;
    yield 2;
}

제너레이터 함수는 선언문 이전에 호출할 수 있다.

 

 

references

product.kyobobook.co.kr

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

 

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog