Hoisting - 호이스팅

Hoisting - 호이스팅

hoist 미국·영국 [hɔɪst]  영국식  중요

1. (흔히 밧줄이나 장비를 이용하여) 들어올리다
2. (화물・장애인을 들어올리기 위한) 승강 장치

출처: 네이버 어학사전

JavaScript에서, 함수 및 변수는 끌어올려(hoisted)집니다. 

호이스팅은 선언을 scope(전역 범위 또는 현재 함수 범위)의 상단으로 이동하는 JavaScript의 행동입니다.

아래와 같은 함수가 있습니다.

function hoisting() {

console.log(value);

var value = 'hoisting';

}

hoisting();

이 함수를 실행할 경우 콘솔에는 어떠한 값이 찍힐까요?

바로 undefined 가 출력됩니다.

왜냐하면, 이 함수는 javascript내에서 해석되기를, 함수안에서 생성된 변수 이므로

함수의 최상단에서 선언되는것으로 호이스팅 되고, 결과적으로 콘솔을 출력할때에는 변수는 선언만 되어있는 상태이므로 undefined가 출력되는것입니다.

즉 아래와 같이 해석됩니다.

function hoisting() {

var value;

console.log(value);

value = 'hoisting';

}

hoisting();

그렇다면 이번에는 

function hoisting() {

console.log(value);

var value = 'hoisting';

}

var hoisting;

console.log(hoisting);

이러한 코드가 있을때, 콘솔에 출력되는 값을 무엇일까요?

바로 [Function: hoisting] 이 출력됩니다.

왜냐하면 변수가 함수 안쪽이 아닌 전역에서 선언되었으므로 최상단으로 호이스팅 되어

결과적으로는 

var hoisting;

function hoisting() {

var value;

console.log(value);

value = 'hoisting';

}

console.log(hoisting);

이렇게 해석되기 때문입니다.

하지만 만약에 

function hoisting() {

console.log(value);

var value = 'hoisting';

}

var hoisting = 'hoisting!'

console.log(hoisting);

이렇게 변수에 값을 할당할 경우에는

var hoisting;

function hoisting() {

var value;

console.log(value);

value = 'hoisting';

}

hoisting = 'hoisting!';

console.log(hoisting);

호이스팅은 되지만 함수 아래에서 다시 변수에 값을 할당하므로 

콘솔에는 hoisting! 이 출력됩니다.

이러한 호이스팅은 신경쓰지 않으면 버그 생성등의 문제가 발생할수 있으므로 주의하여야 합니다.

* 다만, es6의 let, const를 사용한다면 자동적으로 호이스팅 문제는 해결됩니다.

function hoisting() {

console.log(value);

let value = 'hoisting';

}

hoisting();

이 코드는 실행되지 않고 에러를 출력합니다.

왜냐하면 호이스팅이 일어나지 않으므로 console.log는 value가 무엇인지 알지 못하기 때문입니다.

역시 전역에서도 마찬가지로 호이스팅은 일어나지 않습니다.

결론은.... 음.. 호이스팅에 대해 기억하고 let, const를 잘 사용하자?? 입니다 :)