javascript 함수호이스팅(hoisting)

함수호이스팅(Function Hoisting)

자바스크립트 영역에서 유명한 더글라스 클락포드는 함수를 생성할 때 선언식보다는 함수 표현식만을 사용할 것을 권고 하고 있다. 그 이유가 이 함수호이스팅 때문이라고 설명하는데, 대체 함수호이스팅 이란 무엇일까?

함수호이스팅의 = 함수 선언문으로 생성된 함수가 해당 소스코드의 유효범위의 맨 위로 끌어올려진다.

일단 소스코드를 보자

예제1(함수 선언문)

1
2
3
4
5
6
7
8
fn_test(1); //a호출:함수 선언문 이전에 호출

//함수 선언문
function fn_test(temp){
console.log('fn_test run... temp:'+ temp);
}

fn_test(2); //b호출:함수 선언문 이후에 호출

예제1 결과

만약 자바스크립트의 함수호이스팅을 모른다면 예제1의 결과를 의아하게 볼 수 있다. a호출에서 아직 선언되지 않은 시점에서 fn_test함수를 호출 한 결과 오류가 발생하기는 커녕 정상적으로 함수가 호출되어 동작 했다.

이런 동작의 이유가 함수 호이스팅이다. 비록 함수선언문으로 생성된 함수 fn_test는 자동으로 소스코드 최상단으로 끌어올려진다.(a호출 보다 위로)

예제1의 함수호이스팅 동작의 상상

1
2
3
4
5
6
7
8
//함수 선언문, 소스코드 최상단으로 끌어 올려짐
function fn_test(temp){
console.log('fn_test run... temp:'+ temp);
}

fn_test(1); //a호출:함수 선언문 이전에 호출

fn_test(2); //b호출:함수 선언문 이후에 호출

즉 예제1은 위 소스와 같은 동작을 한다는 것이다. 함수 선언문은 함수 호이스팅에의해 항상 소스의 최초시점에 호출 되기때문에 호출a에서 fn_test가 정상 동작 한 것이다.

얼핏 보면 함수호이스팅은 편리한 기능처럼 보이기도 하다. **"어쨋든 오류는 없이, 소스코드가 동작하는데 편리한 기능 아닌가?"**라고 생각 할 수도 있다.

마이클 더글락스는 함수 선언문은 소스코드를 엉성하게 만들어, 코더의 의도하지 않는 소스의 동작을 야기하기 때문에 지양해야 한다고 한다. 그리고 함수 선언문 대신 함수호이스팅이 발생 하지 않는, 함수 표현식으로 함수를 생성해서 사용 할 것을 권고 한다.

예제2(함수 표현식)

1
2
3
4
5
6
7
fn_test(1);  // a 호출: 함수 표현식 이전 호출

var fn_test = function(temp){
console.log('fn_test start… temp:' + temp);
};

fn_test(2); // b 호출: 함수 표현식 이후 호출

예제2 결과

예제1 함수 선언식과 다르게 함수 표현식으로 선언된 함수는 함수호이스팅이 발생하지 않으므로, 함수 생성 이전에 호출 할 경우 아직 존재하지 않는 함수를 호출게 되므로 오류가 발생한다.

개인적으로 화면 단 에서 간단한 DOM제어용 함수는 선언문으로 사용해도 상관 없지만, nodeJS나 Angular등 복잡하고 많은 분량의 자바스크립트 코드 개발시에는 더글라스 말대로 함수 표현식을 사용 하는것이 적당한 것 같다.