간단한 호이스팅 설명

1.

a = 2;

var a;

console.log( a );

2출력

======================

2.

console.log( a );

var a = 2;

undefined 출력

=======================

3.

foo(); // not ReferenceError, but TypeError!

var foo = function bar() {

// ...

};

========================

4.

foo(); // TypeError

bar(); // ReferenceError

var foo = function bar() {

// …

};

이 코드에 호이스팅을 적용하면 다음과 같이 해석된다.

var foo;

foo(); // TypeError

bar(); // ReferenceError

foo = function() {

var bar = …self…

// …

}

1번 호이스팅 과정

var a;

a = 2;

console.log( a );

2번 호이스팅과정

var a;

console.log( a );

a = 2;

3번 호이스팅과정

위와 동일  -  foo호출은 가능하지만(그래서 ReferenceError이 아니다.), foo만 올려지고 foo에 대한 아무 값도 없기에 TypeError

변수와 함수 선언문은 선언된 위치에서 코드의 꼭대기로 ‘끌어올려’진다. 이렇게 선언문을 끌어올리는 동작을 '호이스팅hoisting’이라고 한다.

호이스팅은 스코프별로 작동한다

먼저 함수가 끌어올려지고, 다음으로 변수가 올려진다

함수가 먼저 끌어올려지는 예제

foo(); // 1

var foo;

function foo() {

console.log( 1 );

}

foo = function() {

console.log( 2 );

};

결과값으로 2가 아니라 1이 출력된다! 엔진은 이 코드를 다음과 같이 해석한다.

function foo() {

console.log( 1 );

}

foo(); // 1

foo = function() {

console.log( 2 );

};