[JavaScript] 호이스팅(Hoisting)과 함수표현식 권장 이유

호이스팅(Hoisting)

호이스팅은 말 그대로 끌어 올린 다는 것이다. 

자바스크립트 에서 끌어 올리는 것은 변수 '선언'과 함수 '선언' 을 끌어올리는 것이다.

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

console.log(a());
console.log(b());
console.log(c());
 
function a() {
    return 'a';
}
 
var b = function bb() {
    return 'bb';
}
 
var c = function() {
    return 'c';
}

위에 보이는 코드에서 a() 부터 실행 오류가 떠야 하지만 a는 출력이 된다. 왜냐하면 호이스팅에 의해서 실제 자바 컴파일은 이런식으로 이루어 지기 때문이다.

function a() {
    return 'a';
}
var b;
var c;
console.log(a());
console.log(b());
console.log(c());
 
b = function bb() {
    return 'bb';
}
c = function() {
    return 'c';
}

보는 바와 같이 함수 선언과 변수 선언이 위로 호이스팅 돼서 정의가 되었기 때문에 console.log(a()); 는 실행이 되었던 것이다. b(), c()는 b와 c가 그냥 변수 이기 때문에 실행 오류가 뜬다.

---

함수 표현식 권장이유

이러한 함수 호이스팅  때문에 자바스크립트 Guru로 알려진 더글러스 크락포드는 함수 생성에 있어서 함수 표현식만을 사용할 것을 권하고 있다. 함수 선언식의 사용 예제를 보자

console.log(add(2, 3));
 
function add(x, y) {
    return x + y;
 
}
 
console.log(add(3, 4));

add(2, 3)은 아직 add() 함수가 정의되지 않았음에도 불구하고 add() 함수를 호출하는 것이 가능하다. 이것은 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다는 것을 확인할 수 있다. 이것을 함수 호이스팅이라 부른다. 함수를 선언하기 전에 함수를 선언한 것이기 때문에 코드의 구조를 엉성하게 만들 수도 있다고 더글라스는 지적했다. 그래서 함수 표현식만을 사용하라고 권장하는 것이다.

console.log(add(2, 3));  // error
 
// 함수 표현식 형태로 add() 함수 정의
var add = function (x, y) {
    return x + y;
 
}
 
console.log(add(3, 4));  // 7

add(2, 3) 함수는 실행되지 않는다 왜냐하면 함수 표현식 형태로 add() 함수가 정의되어 있기 때문이다. 따라서 호이스팅이 일어나지 않는다. add(3, 4)와 같이 함수가 생성된 이후에 호출이 가능하다. add(3, 4)로 인해 add() 함수가 생성된 후에 함수가 정상적으로 동작한다는 것을 확인할 수 있다. 

정재남, 『핵심개념을 알아보는 Javascript Flow』, 인프런 강의

송형주, 고현준, 『인사이드 자바스크립트』, 한빛미디어(2014)