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를 잘 사용하자?? 입니다 :)

'Javascript' 카테고리의 다른 글

자바스크립트 이벤트 - Javascript Event  (0) 2017.07.31
블로그 이미지

Jaro

대한민국 , 인천 , 남자 , 기혼 , 개발자 jaro0116@gmail.com , https://github.com/JaroInside https://www.linkedin.com/in/seong-eon-park-16a97b113/

,