[Frontend Interview] 호이스팅이란

hoist는 건축/건설이나 화물 운반에 사용되는 장비로 화물 등을 들어올리는 업무를 수행한다.

즉, 아래에 위치한 것을 위로 끌어올리는 역할을 하는 장비인데, 이 단어 자체로도 "들어올리다" 라는 의미를 가지고 있다.

 

javascript 에서의 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며

이때 주의해야할 점은 변수의 선언과 할당내용을 모두 상단으로 끌어올리는 게 아니라, 선언부분만 분리하여 최상위로 끌어올리는 것이다.

(선언된 변수에 값을 할당하는 부분은 끌어올리지 않음)

 

예를 들어보자.

test();

function test(){
	console.log(name);
    var name = "kim";
    console.log(name);
}

위 코드의 결과는 어떻게 될까?

정답은

undefined

kim

이다.

 

왜냐하면 내부적으로 자바스크립트 엔진에서

var name = 'kim'을

var name과 name='kim'으로 분리한 뒤,

선언부인 var name를 함수 상단으로 끌어올려서 선언해버리기 때문이다.

 

그렇다면 아래 결과는 어떻게 될까?

test();

function test(){
    console.log(name);
    name = 'kim';
    console.log(name);
}

정답은

kim

kim

이다.

 

오류도 발생하지 않고, 변수를 할당하기 전임에도 이미 할당된 값으로 반환해버린다.

왜냐하면 함수 내에서 변수 선언 명령어를 제외하고 선언 시, 전역 변수의 형태로 사용되기 때문이다.

 

 

그리고 위 2개의 예제에서도 이상한 점이 있는데,

함수 선언보다 호출이 먼저 일어나고 있는데도 에러 없이 코드가 정상실행되고 있는 것을 알 수 있다.

 

왜냐하면 함수 호이스팅은 함수 선언식인 경우만 적용되어 최상단으로 끌어올려지기 때문이다.

함수 선언식과 함수 표현식에 대한 예는 다음과 같다.

 

// 함수 선언식
function test1(){
	var name = "kim";
}

// 함수 표현식
var test2 = function(){
	var name = "kim";
}

 

 

참고: ojava.tistory.com/144