자바스크립트 호이스팅(javascript hoisting)

자바스크립트를 공부하다보면 다른 언어와 다른 점이 몇 가지 있습니다. 그 중 호이스팅 (Hoisting)이라 불리는 것이 있는데 이 포스팅은 호이스팅에 대해 알아보는 것에 중점을 두고 있습니다.

 

호이스팅(hoisting)

Hoisting은 hoist라는 단어에서 출발합니다. “끌어 올리는 장치”, “끌어 올리기”라는 뜻입니다. 자바스크립트에서도 호이스팅은 마찬가지로 끌어 올린다는 것이 포인트입니다.

 

그렇다면 끌어올려지는 것은 무엇일까요?

 

바로 변수(Variable)입니다. 

간단하게 말해서 JavaScript에서의 호이스팅의 의미는 변수 선언문을 끌어올린다는 뜻으로 이해하면 됩니다. 좀 더 이해를 돕기위해 아래의 코드를 준비했습니다.

위의 코드는 호이스팅을 설명하기 위한 간단한 예제입니다. 위 코드를 보시게 되면 함수 hoisting안에서 변수 value의 호출이 두 번 일어납니다. 한 번은 변수 선언문 전에 또 한 번은 변수 선언 후에 호출이 되는데, 다른 프로그래밍 언어의 경우에는 선언문 전에 호출됐을 때 에러가 납니다. 하지만 JavaScript의 경우 호이스팅이 됨으로써 아래 코드와 같은 구동이 이루어집니다. 

즉, 변수 선언문이 유효범위 안의 제일 상단부로 끌어올려 지게 되고, 선언문이 있던 자리에서 초기화가 이루어지는 결과를 갖는 것입니다. 그 실행결과 첫 번째 호출에서는 초기화가 되지 않은 undefined가, 두 번째 호출에서는 초기화된 값이 나옵니다.

 

그렇다면 위 코드는 어떻게 동작할까요?

다른 프로그래밍 언어에 익숙한 개발자 분들은 변수 value의 첫 호출에서 전역변수가 참조된다고 생각하실 수 있습니다. 하지만 JavaScript의 호이스팅으로 인해서 선언 부가 함수 hoisting의 최 상단에서 끌어올려 짐으로써 전역변수가 아닌 지역변수를 참조합니다.

함수의 호이스팅을 이해할 때는 한 가지만 기억하시면 될 것 같습니다. 

바로, 여러 가지의 함수 정의 방법 중 ‘함수 선언문 방식만 호이스팅이 가능하다.’라는 점입니다.

앞서 말하였듯 위의 코드와 실행결과를 보시면 함수 선언문 방식만 호이스팅이 제대로 이루어집니다. 이 결과를 보고 왜 함수 선언문 방식만 호이스팅이 되고 함수 표현식을 통해 함수를 정의하는 방법은 호이스팅이 되지 않는지 궁금해하시는 분들도 계실 것 같은데요. 

그 이유는 함수 표현식을 통한 함수 정의 방법은 변수에 함수를 초기화시키기 때문에(이를 함수변수라고도 합니다) 선언문이 호이스팅이 되어 상단으로 올려진다 하더라도 함수가 아닌 변수로써 인지되기 때문입니다. 

위의 코드에서 함수실행 구문이 아닌 변수를 호출하게 되면 변수의 호이스팅과 같은 undefined란 결과가 나옵니다.