[Javascript] 호이스팅(Hoisting)에 대해 정리

 

실무에서 프론트 프레임워크로 도배된 프로젝트들만 하다보니

자바스크립트의 기본 특성들을 다시 리마인드하고자 포스팅을 하게되었습니다.

그 중에서도 호이스팅(Hoisting) 특성에 대해 정리해보려 합니다.

 

호이스팅은

Javascript라는 언어의 특성을 가장 잘 보여주는 특성 중 하나입니다.

 

정의

Hoist의 사전적 정의는 '끌어올리기'라는 뜻을 가지고 있습니다. 자바스크립트에서 끌어올려지는 것은 변수이며, var 키워드로 선언된 모든 변수선언은 호이스트 됩니다. 호이스트란 변수의 정의가 정의된 범위에 따라 '선언'과 '할당'으로 분리되는 것을 말합니다.

 

1) 변수가함수 내에서 정의되었을 경우, 선언이 함수 스코프안에 최상위로 이동합니다.

2) 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 이동합니다.

 

반드시 '선언'과 '할당'을 이해해야하며, 호이스트되는 것은 이 중에서 "선언" 이다.

 

 

예제와 함께

function getA() {
	console.log( a ) // undefined
	var a = 100
	console.log( a ) // 100
}
 
getA()

위 코드를 보면 다른 언어의 경우엔 변수 a를 선언하기 전 호출 한다면 오류를 발생시킵니다. 하지만, 자바스크립트에서는 undefined라는 값을 할당하여 표출해줍니다. var a = 100 이 구문에서 var a; 를 호이스트하기 때문입니다.

위 코드를 작동 순서에 맞게 재구성하면 아래와 같은 코드가 됩니다.

function getA() {
    var a;
    console.log( a ) // undefined
    a = 100
    console.log( a ) // 100
}

getA()

선언문은 항상 자바스크립트 엔진 구동 시 가장 최우선으로 해석하여 호이스팅 된 후 

할당은 런타임 과정에서 이루어 지기 때문에 호이스팅 되지 않습니다.

 

함수가 자신이 위치한 코드에 상관없이 함수선언문 형태로 정의한 함수의 유효범위는 전체코드의 맨 처음부터 시작합니다. 이 뜻은 함수선언이 함수 실행 부분보다 코드상 뒤에 있더라도 자바스크립트 엔진이 함수 선언을 끌어 올리는 것을 의미합니다. 함수 호이스팅은 함수를 끌어올리지만 변수의 값은 끌어올리지 않는다.

 

foo();

// 함수선언
function foo() {
    console.log( 'hello' )
}

foo 함수에 대한 선언을 호이스팅하여 전역(global) 객체에 등록시키기 때문에 hello가 제대로 출력됩니다.

foo();

// 함수표현
var foo = function() {
    console.log( 'hello' )
}

위 함수표현은 함수리터럴을 할당하는 구조로 작성되어 있기때문에 호이스팅이 되지 않습니다.

위 코드는 런타임 환경에서 Type Error가 발생하게 됩니다.

 

 

 

Ref.

https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/JavaScript