함수 선언식 vs 함수 표현식 (feat. hoisting)

minjae-mj·2020년 10월 28일
1
post-thumbnail

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

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

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

보통은 함수가 정의된 이후에 함수 호출이 가능하지만, 함수선언식으로 정의한 함수는 호이스팅이 가능해서 함수정의에 앞서 함수호출이 가능하다. 아래 예제에서 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() = {
	return "I just ate two apple mangoes!";
}

0개의 댓글