함수 호이스팅 (Function hoisting)

🔎 호이스팅에 대해 더 깊이 알아보기 : https://ttum.tistory.com/19?category=754442

 

함수호이스팅을 알기 위해서는 우선 함수 선언문과 함수 표현식에 대해 알아 한다.

 

1. 함수 선언문

자바스크립트에서 함수를 선언하는 방법들 중 하나이다. 우리가 일반적으로 C나 C++ 등에서 선언하는 방식이라고 생각하면 된다.

함수를 독립적으로 선언하고 따로 불러서 호출하기 때문에 함수 이름을 꼭 지정해주어야 한다. 함수 이름이 있지 않으면 부를 수 없기 때문이다.

function add(a, b){
	return a + b;
}

console.log(add(3, 7)); //출력값: 10

 

2. 함수 표현식

함수 표현식은 하나의 함수를 만들고, 그것을 변수에 할당하는 것이다. 먼저 예제를 보면 이해가 쉬울 것이다.

const add = function (a, b){
	return a + b;
}

console.log(add(3, 7)); //출력값: 10

C나 C++ 코드만 보던 사람은 생소하게 느껴질 수 있지만, 자바스크립트에서는 변수에 함수를 할당하는 것이 가능하다. 따라서 위와같은 코드가 가능한 것이다.

여기서 자바스크립트의 또다른 특이한 점을 볼 수 있는데, 익명함수로 표현이 가능하다는 것이다. (function하고 그 뒤의 함수 이름이 없는 것을 보면 알 수 있다.)

꼭 익명함수로 표현해야 하는 것은 아니지만, 재귀호출이 필요해서 함수 내부에서 그 함수를 또 부르는 특이한 경우를 제외하고는 이름을 굳이 지어줄 필요가 없다. 함수표현식 외부에서는 호출을 할 수 없기 때문이다.

아래의 경우는 함수표현식으로 나타내며 할당한 함수에 addFunction이라는 이름을 지어주었다.

const add = function addFunction(a, b){
	return a + b;
}

console.log(add(1,2)); // 출력값: 3
console.log(addFunction(1,2)); // Uncaught ReferenceError

 

---

그 이외의 Function()생성자 함수도 있으나 잘 사용되지 않고 이를 이해하지 않아도 함수 호이스팅을 이해하는 데에는 문제가 없으므로 생략하겠다.

 

함수호이스팅이란 무엇인가?

사전에 찾아보면 "끌어올리기"라는 뜻이 나온다. 무엇을 끌어올리느냐? 바로 함수를 끌어올리는 것이다.

 

함수 선언문의 경우에는 선언을 해두면 그 함수의 유효범위가 코드의 맨 처음부터 시작한다. 함수 선언문이 제일 위로 "끌어올려지는 것"이다. 따라서 코드의 마지막 부분의 add라는 함수를 선언하더라도 코드의 첫 줄에 add(2,3)을 호출했을 때, 정상적으로 호출이 되는 것이다.

// 함수 호이스팅 발생
add(3, 5) // 출력값: 8

// 함수 선언문
function add(a, b){
	return a + b;
}

위의 코드는 정상적으로 동작한다. 그러나 함수를 선언하기 전에 사용하는 것은 코드의 구조를 엉성하게 만들 수 있으므로 권장하지 않는다.

 

반면 함수 표현식을 사용하면 함수 호이스팅이 발생하지 않는다. 따라서 보통의 경우에서는 함수 표현식만을 사용하는 것을 권장한다.

add(3, 5) // uncaught type error

// 함수 표현식으로 함수 정의
const add = function (a, b){
	return a + b;
}

add(3, 5) // 7

 

Reference

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