[Javascript] 호이스팅(hoisting)

[Javascript] 호이스팅(hoisting)

 

* 호이스팅?
  - '끌어올리다'라는 의미.
  - 변수 정보를 수집하는 과정을 더웃 이해하기 쉬운 방법으로 대체한 가상의 개념.
  > 출처: 도서 '코어자바스크립트'

 

 

⭐ 호이스팅 규칙: 함수 선언, 변수명을 위로 끌어올리고 할당과정은 원래 자리에 그대로 남겨둔다. ⭐

 

 

 

아래 코드를 실행해보면 어떻게 될까? 한번 머릿속으로 예상해보자.

var x = 1;

console.log('x - (1): ', x);
console.log('y - (1): ', y);
console.log('a - (1): ', a);
console.log('b - (1): ', b);
console.log('c - (1): ', c);
e(3);

var y = 2;

function a() {
    console.log('function a');
}

var b = function () {
    console.log('function b');
};

var c = function d() {
    console.log('function d');
};

function e(z) {
    console.log('z - (1): ', z);

    var z = 4;
    console.log('z - (2): ', z);

    function z() {
        console.log('function z');
    }
}

console.log('x - (2): ', x);
console.log('y - (2): ', y);
console.log('a - (2): ', a);
console.log('b - (2): ', b);
console.log('c - (2): ', c);
e(3);

 

아마, 아래와 같이 실행될 것이라고 예상된다.

x - (1):  1
y - (1):  undefined
a - (1):  undefined
b - (1):  undefined
c - (1):  undefined
e : 선언되지 않았으므로 Error 발생!
x - (2):  1
y - (2):  2
a - (2):  [Function: a]
b - (2):  [Function: b]
c - (2):  [Function: d]
z - (1):  3
z - (2):  4

 

...하지만, 아니다!

 

직접 코드를 실행해보면 위와 같이 출력되지 않는다!

대부분 위에서 아래로, 좌에서 우로 읽기 때문에 위와 같을 것이라 생각하지만

자바스크립트는 처음에 컨텍스트 내부 전체를 쭉 읽어가면서 순서대로 선언된 함수, 식별자 등을 수집하기 때문에 아래와 같이 출력이 된다.

x - (1):  1
y - (1):  undefined
a - (1):  [Function: a]
b - (1):  undefined
c - (1):  undefined
z - (1):  [Function: z]
z - (2):  4
x - (2):  1
y - (2):  2
a - (2):  [Function: a]
b - (2):  [Function: b]
c - (2):  [Function: d]
z - (1):  [Function: z]
z - (2):  4

 

그럼 어떻게 위와 같이 출력이 되는 걸까?
그 원리는 다음과 같다.

맨위에 설명한 호이스팅 규칙에 따라 var 로 선언된 변수와 함수 선언을 가장 맨위로 끌어올리기 때문이다.

var x;
var y;
function a() {
    console.log('function a');
}
var b;
var c;
function e(z) {
    var z;
    function z() {
        console.log('function z');
    }

    console.log('z - (1): ', z);
    z = 4;
    console.log('z - (2): ', z);
}

x = 1;

console.log('x - (1): ', x);
console.log('y - (1): ', y);
console.log('a - (1): ', a);
console.log('b - (1): ', b);
console.log('c - (1): ', c);
e(3);

y = 2;
b = function () {
    console.log('function b');
};
c = function d() {
    console.log('function d');
};

console.log('x - (2): ', x);
console.log('y - (2): ', y);
console.log('a - (2): ', a);
console.log('b - (2): ', b);
console.log('c - (2): ', c);
e(3);

 

 

 

 

---

[참고] 도서 `코어 자바스크립트`