함수 표현식
Function Expression- 정의한 함수를 별도의 변수에 할당한다.
let sum = function(a, b){
return a + b;
};함수 선언식
Function Declaration- 함수명이 정의되어 있고, 별도의 할당 명령이 없다.
function sum(a, b){
return a + b;
}차이점
호이스팅 (hoisting)
함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
(1) 호이스팅이란?
코드가 실행하기 전, 변수/함수 선언을 해당 스코프의 최상단으로 끌어올리는 것이다.
(실제로 끌어올려지는 것이 아닌, JavaScript Parser가 내부적으로 끌어올려서 처리한다.)
(2) 호이스팅 대상은?
⭕ var와 함수 선언문이 호이스팅 대상이다.
❌ let / const 그리고 함수 표현식은 호이스팅 대상이 아니다.
(3) 비교
함수 표현식
- 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다.
장점: 호이스팅에 영향을 받지 않는다.
sayHi("John"); // 함수 생성되지 않은 상태. error
let sayHi = function(name) { // 실행흐름이 여기에 도달했을 때, 함수 생성됨.
alert( `Hello, ${name}` );
};함수선언식
- 함수선언식이 정의되기 전에 호출이 가능하다.
장점: 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에, 코드를 유연하게 구성할 수 있다.
sayHi("Hyerin"); // Hello, Hyerin
function sayHi(name){
alert(`Hello, ${name}`);
}(4) 호이스팅의 단점
- 호이스팅이 일어나면, 위에서 아래로 순차적으로 진행되는 것이 아니기 때문에 결과를 예측하기 비교적 어려워진다.
- 변수, 함수명이 같은 상태로 호이스팅이 발생하면 변수가 함수값을 덮어쓰게 될 수 있다.
참고
FE Developer