JavaScript - 함수 선언식과 함수 표현식 차이점

 

함수 선언식 - function declaration

 

 

원래 알던 함수 선언식

 

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

 

 

함수 표현식 - function expression

 

 

자바스크립트에서는 함수를 값으로 사용 가능. 즉, 함수를 변수에 할당 가능.

 

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

 

 

두 방식의 차이점

 

 

호이스팅(hoisting)에서 차이를 보입니다.

 

함수 표현식은 호이스팅의 영향을 받지 않습니다.

 

호이스팅 설명글

https://besforyou.tistory.com/269

 

<예시 코드>

 

sample()
functionEx()

// 함수 선언식
function sample() {
  console.log("Sample function");
}

// 함수 표현식
var functionEx = function() {
  console.log("Function expression");
}

 

결과

 

 

함수 표현식은 호이스팅의 영향을 받지 않는것을 볼 수 있습니다.

 

 

함수 표현식의 장점

 

 

1. 호이스팅의 영향을 받지 않아 예기치 못한 버그 방지 가능

 

2. 콜백, 클로저로 사용 가능

 

3. 함수 선언식보다 깔끔하여 가독성 높임