함수 선언식 vs 함수 표현식

함수선언식과 표현식의 다른점

둘다 함수를 정의하는 방법이지만 결과적으로 호이스팅(hoisting)의 유무이다.

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

// 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!";
}
// function expression (함수표현식)
var square = function(number) {
  return number * number;
}

함수 호이스팅과 변수 호이스팅

자바스크립트의 호이스팅은 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동착하는 특성을 말한다. 즉, 자바스크립트는 모든 선언문(var,let,const,function,class)이 선언되기 이전에 참조 가능하다.
함수 선언문 으로 정의된 함수는 함수 호이스팅이발생 즉,함수선언,초기화,할당이 한번에 이루어진다.
함수 표현식 은 함수 호이스팅이 아니라 변수 호이스팅 이 발생한다.
함수 호이스팅과 다르게 변수 생성 및 초기화 와 할당이 분리되어 진행 되어서 호이스팅된 변수는 undefined로 초기화 되고 실제 값의 할당은 할당문에서 이루어진다.

함수표현식을 권고하는 이유

함수 표현식은 위의 코드처럼 호이스팅 이 불가능하다.
하지만, 함수 선언식은 호이스팅이 가능하기 때문에 함수의 위치와는 상관없이 함수가 실행이 되는데 이 때문에 코드의 구조를 엉망으로 만들 수 있기 때문에 함수 표현식을 권고한다.
또한 함수선언식으로 대규모 애플리케이션을 개발하는 경우 너무 많은 코드를 변수객체(VO)에 저장하므로 애프리케이션의 응답속도는 현저히 떨어질 수 있다고 한다.

Reference

https://velog.io/@reveloper-1311/%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D%EA%B3%BC-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D

https://velog.io/@minjae-mj/%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D-vs-%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D-feat.-hoisting

https://poiemaweb.com/js-function