함수 선언식과 함수 표현식의 차이

함수 선언식 (Function Declartion)

함수 명이 정의되어 있고, 별도의 할당 명령이 없는 것

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

함수 표현식 (Function Expression)

정의한 function을 별도의 변수에 할당하는 것

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

함수 선언식과 함수 표현식의 차이

주요 차이점은 호이스팅에서 양상을 나타내는데,

함수 선언식은 함수 전체를 호이스팅 시키고, 정의된 범위의 맨 위로 호이스팅되어 함수 선언 전에 함수를 함수를 사용할 수 있다는 것이다.

함수 표현식은 별도의 변수에 할당을 하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 여기서, 선언부만 호이스팅 하게 된다.

sum(50, 50); // 100
minus(100, 50); // Uncaught TypeError: minus is not a function

function sum(a, b) { // 함수 선언식
	return a + b;
}

var minus = function(a,b) { // 함수 표현식
	return a - b;
}

위의 코드는 호이스팅이 마치게 되면 다음과 같이 표현을 할 수 있다.

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

var minus;

sum(50, 50); // 100
minus(100, 50); // // Uncaught TypeError: minus is not a function

function (a,b) {
	return a - b;
}

함수 선언식으로 작성한 함수는, 함수 전체가 호이스팅 된다고 하였는데 전역적으로 선언하게 되면 중복적으로 동명의 함수를 쓰게되면서 원치않는 결과를 초래할 수 있다. 이를 함수 표현식으로 작성하게 되면 방지할 수 있다.

 

함수 표현식의 장점

콜백 함수로 사용이 가능하다. (함수 표현식을 다른 함수의 인자값으로 넘길 수 있다)

$(document).ready(function () {
  console.log('An anonymous function'); // 'An anonymous function'
});

클로져로 사용이 가능하다.

 

---

레퍼런스

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

 

[JavaScript] 함수 선언식과 함수 표현식, 차이와 장점

GitHub - imacoolgirlyo/javascript: JavaScript Style Guide