[Javascript] 함수 호이스팅 (Function Hoisting)

 

 

함수 호이스팅

 

 

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

 

// 함수 선언문과 함수 호이스팅
add(2, 3); // 5

function add(x , y) {
    return x + y;
}

add(3, 4); // 7

 

 위 add함수 호출 부분에서는 add()함수가 정의 되지 않았음에도 호출 하는 것이 가능하다.

이것은 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다는 것을 알 수 있다. 이것을 함수 호이스팅이라고 부른다.

 

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

 

// 함수 표현식과 함수 호이스팅
add(2, 3); // Uncaught type error

var add = function (x , y) {
    return x + y;
};

add(3, 4); // 7

 

 add()함수는 함수 표현식 형태로 정의되어 호이스팅이 일어나지 않는다. 위 add()를 호출한 시점에서 add()가 정의 되지 않았으므로 에러가 발생한다.

 

 

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

 

 

 

 

 

 

참조 저서 : 송형주, 고현준, 인사이드 자바스크립트, 한빛미디어, 78쪽