함수 선언식 vs 함수 표현식 (feat. hoisting), 선언적 함수, 익명함수

🙋🏻‍♀️ 함수선언식과 표현식은 어떻게 다를까?

둘 다 함수를 정의하는 방법이지만 문법이 다르다. 그리고 결과적으로 호이스팅(Hoisting)이 되느냐 안되느냐의 차이를 가져온다.

함수 선언식과 표현식은 선언적함수, 익명 함수로 나타내기도 한다. 선언적 함수는 함수에 이름을 붙여서 정의하는 것이고, 익명함수는 이름을 붙이지 않는 것이다. 따라서 익명 함수를 재사용하고자 한다면, 변수에 담아야 하는데 이를 함수 표현식이라고 한다.

// 함수 선언식 (선언적 함수) 
function iHaveName {
	return 'hi!'; 
}

// 익명 함수를 함수 표현식으로 사용
const iGiveName = function () {
	return 'hi!'; 
}

🙋🏻‍♀️ 호이스팅 되었다는게 무슨 말인지?

보통은 함수가 정의된 이후에 함수 호출이 가능하지만, 함수선언식으로 정의한 함수는 호이스팅이 가능해서 함수정의에 앞서 함수호출이 가능하다. 아래 예제에서 drinkWater 함수는 함수 호출을 먼저하고 함수를 정의하였지만, 정상적으로 값을 리턴하고 있다.

하지만 호이스팅의 특징을 이용한 함수선언식을 남용하면, 함수가 어디서 정의가 되었는지 예측이 어렵고 유지보수 측면에서 매끄럽지 않을 수 있으므로 염두에 두도록 한다.

// Hoisting (호이스팅)
drinkWater(); // "I just drank a cup of sparkling water!" (Hoisted) 
eatFruit(); // Error: eatFruit() is not defined. (Not Hoisted) 

// function declaration (함수선언식)
function drinkWater() {
	return "I just drank a cup of sparkling water!"; 
}

// function expression (함수표현식)
const eatFruit = function () {
	return "I just ate two apple mangoes!";
}

💡 호이스팅이 가능한 이유
기본적으로 브라우저는 script 를 위에서 아래로 읽어 내려온다. 하지만 선언적 함수는 런타임 전에 먼저 읽혀서 글로벌 영역에 등록된다. 그래서 script 를 읽어내려올 때, 선언적 함수가 순서상 아래에 정의되어 있더라도 이미 브라우저에 알려진 함수이기 때문에 오류를 발생시키지 않는다.

함수 표현식으로 정의한 함수는 여타 코드와 같이 런타임에서 순서대로 실행되므로, 먼저 정의 후에 호출해야 한다.