함수 호이스팅

함수 호이스팅

함수를 생성하는 3가지 방법이 있는데 동작방식이 약간의 차이가 있다. 

=> 그 중 하나가 함수 호이스팅(Function Hoisting)

함수표현식만을 사용할 것을 권장하는데 그 이유는 함수 호이스팅때문

//함수 선언문 방식과 함수 호이스팅

//1번

add(2,3);  // 5

//함수 선언문 형태로 add() 함수 정의

//2번

function add(x,y) {

     return x + y;

}

//3번

add(3,4);  // 7

1번

이 시점에서 add()함수가 정의되지 않았음에도 2번에 정의된 add()함수를 호출하는 것이 가능하다.

-> 이것은 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작한다는 것을 확인할 수 있다.

=> 이것이 함수 호이스팅

3번

2번에서 정의된 add() 함수가 정상적으로 호출

이러한 함수 호이스팅은 함수를 사용하기 전에 반드시 선언해야한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수도 있음

-> 함수 표현식 사용 이유

함수 표현식으로하면 위의 결과가 달라

//함수 표현식 방식과 함수 호이스팅

//1번

add(2,3);  //uncaught type error

//함수 표현식 형태로 add()함수 정의

//2번

var add = function(x,y){

     return x + y;

}

//3번

add(3,4);  //7

1번

add()함수는 2번에서 함수 표현식 형태로 정의되어 있어 호이스팅이 일어나지않는다.

-> 따라서 3번과 같이 함수가 생성된 이후에 호출이 가능.

1번에서는 add()함수를 호출한 시점에서 아직 add()함수가 생성되기 전이므로 uncaught type error 에러가 발생

3번

add()함수가 생성된 후에는 함수가 정상적으로 동작한다는 것을 확인 가능

이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수생성(Instantiation)과 초기화(Initialization) 작업이 분리돼서 진행되기 때문

<참고문헌 : 인사이드자바스크립트>