[JS] 함수 호이스팅과 변수 호이스팅

 

이번 내용은 전 글과 이어지는 내용입니다. 혹시나 전 포스팅을 안 보고 오신분은 (https://sdass.tistory.com/6)를 보시고 와주세요!

 

저번 포스팅에서는 3가지의 함수 정의 방식을 알아봤습니다. 정의 방식은 달라도 결국 Function 생성자 함수를 통해 함수를 생성하는 것까지 확인하였습니다. 그런데 이 3가지 함수 정의 방식은 동작 방식에 약간 차이가 있습니다.

 

console.log(minus(10,8)); //2

function minus(first, second){
	return first - second;
}

위 코드를 보면 함수 선언문으로 함수가 정의되기 전에 함수 호출이 가능합니다.

함수 선언문의 경우 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든 호출이 가능한데 이것을 함수 호이스팅(Function Hoisting)이라고 합니다.

 

자바스크립트는 ES6의 let, const를 포합하여 모든 선언(var, let, const, function, function*, class)을 호이스팅합니다.

 

호이스팅이란 모든 선언문이 해당 Scope의 최상위로 옮겨진 것처럼 동작하는 특성을 말합니다.

여기서 Scope란 해당 변수 혹은 함수의 유효 범위입니다.

console.log(globarVariable); //undefined

var globarVariable = 10;

위 예제에서 globarVariable은 전역변수입니다.

호이스팅으로 인해서 사실상 맨위에 선언된거나 마찬가지이기 때문입니다.

하지만 호이스팅은 선언을 최상위로 올리는 것이지 초기화까지 함께 해주는 것은 아니기 때문에 값이 10이 아닌 undefined가 나옵니다(최상위로 옮겨서 선언한 후 자동으로 undefined로 초기화시킵니다).

 

각 변수별로 스코프의 차이와 호이스팅에 대한 내용은 https://sdass.tistory.com/5 여기서 다뤘으니 모르시는 분께서는 보고와주시길 바랍니다.

 

자 이제 함수 호이스팅과 변수 호이스팅이란 뭔지, 어떤 차이가 있는지 알아보겠습니다.

 

함수 호이스팅이란 함수의 선언 위치와 상관없이 코드 내 어느 곳에서든 호출이 가능한 것입니다.

fun_hello(); //hello

function fun_hello(){
	console.log('hello!');
}

이런식으로 말이죠.

함수를 함수 선언문을 이용해서 정의했습니다. 당연하게도 fun_hello는 함수 호이스팅으로 인해서 코드가 문제없이 실행됩니다.

위 내용들을 다 이해하고 계셨다면  별겨아닌 내용이죠.

 

변수 호이스팅이란 변수의 선언 위치와 상관없이 코드 내 어느 곳에서든 호출이 가능지만 초기화는 undefined다.

 

함수 호이스팅과 변수 호이스팅의 차이점은 초기화가 다르게 된다는 점입니다.

그렇다면 이게 구체적으로 어떤식으로 차이가 생길 수 있는지 보도록 하겠습니다.

 

함수 호이스팅같은 경우는 위에 있는 fun_hello 예제를 보시면 아시겠지만 아무문제 없이 함수가 실행됩니다.

그렇다면 이번엔 함수를 함수 표현식을 이용해서 정의해보겠습니다.

fun_apple(); //Type Error

var fun_apple = function(){
	console.log('I like apple!');
}

위 코드를 그대로 실행하시면 첫 번째 줄에서 fun_apple은 function이 아니라는 Type Error가 발생하는 것을 알 수 있습니다. 그 이유는 fun_apple은 변수 호이스팅이 됐기 때문입니다.

 

즉 fun_apple을 호출한 시점에서는 fun_apple 안에는 함수의 정의가 들어가 있는 것이 아닌 undefined가 들어가 있는 상태였던 겁니다. 물론 이는 익명 함수 표현식이 아닌 기명 함수 표현식을 이용해 선언해도 마찬가지입니다.

fun_hungry(); //Type Error

var fun_hungry = function fun_hungry(){
	console.log('I am very hungry!');
}

 

따라서 함수를 정의할 때 함수 표현식을 사용하면 함수 호이스팅이 아닌 변수 호이스팅이 일어나서 함수를 정의한 시점보다 앞에서 함수를 호출할 경우 Type Error가 발생할 수 있다라는 점을 조심하셔야합니다.

 

 

오타, 잘못된 점 지적은 댓글로 부탁드립니다. 수정하도록 하겠습니다.

참고 : https://poiemaweb.com/js-function