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

함수 선언식

---

일반적인 프로그래밍 언어의 함수 정의 방식

function 함수명(매개변수) {
	// do something
}

예시)

function add(num1, num2) {
  return num1 + num2
}
add(2, 7) // 9

함수 표현식

---

표현식 내에서 함수를 정의하는 방식

• 함수 표현식은 함수의 이름을 생략한 익명 함수로 정의 가능

변수키워드 함수명 = function(매개변수) {
  // do something
}

예시)

const sub = function(num1, num2) {
  return num1 - num2
}
sub(7, 2) // 5

• 표현식에서 함수 이름을 명시하는 것도 가능
  => 이 경우 함수 이름은 호출에 사용되지 못하고 디버깅 용도로 사용됨

const mySub = function namedSub(num1, num2) {
  return num1 - num2
}
mySub(1, 2) // -1

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

---

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

- 함수 선언식 호이스팅 예시

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

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

var sub = function (num1, num2) { // 함수 표현식
  return num1 - num2;
}

- 함수 표현식 호이스팅

function sum(num1, num2) { // 함수 선언식 - 함수 전체 호이스팅
    return num1 + num2;
};

var sub; // 함수표현식 - 선언부만 호이스팅

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

function (num1, num2) { // 함수 표현식 - 할당부는 그대로
  return num1 - num2;
}

- 올바른 함수 활용 방법

var sub = function (num1, num2) { // 함수 표현식
  return num1 - num2;
}

sum(50, 50); // 100
sub(100, 50) // 50

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

• 함수 선언식은 함수 전체를 호이스팅 함
• 함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅함