함수 선언문과 함수 표현식

함수 선언문

function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미한다.
반드시 함수명이 정의돼 있어야 한다. (기명 함수 표현식)

 

기명 함수 표현식은 주의할 점이 하나 있다.

바로 외부에서는 함수명으로 호출할 수 없다는 점이다.
함수명은 오직 함수 내부에서만 접근할 수 있다.

 

함수 표현식

정의한 function을 별도의 변수에 할당하는 것
함수명이 정의되지 않아도 된다. (익명 함수 표현식)

일반적으로 함수 표현식은 익명 함수 표현식을 말한다.

 

 

🎈함수를 정의하는 세 가지 방식

function a () { }  // 함수 선언문. 함수명 a가 곧 변수명
a();  // 실행

var b = function () { }  // (익명) 함수 표현식. 변수명 b가 곧 함수명
b();  // 실행

var c = function d () { }  // 기명 함수 표현식. 변수명은 c, 함수명은 d
c();  // 실행
d();  // ERROR

 

👉🏻 함수 선언문과 함수 표현식(1) - 원본 코드

console.log(sum(1, 2));
console.log(multiply(3, 4));

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

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

 

👉🏻 함수 선언문과 함수 표현식(2) - 호이스팅을 마친 상태

var sum = function sum (a, b) {  // 함수 선언문은 전체를 호이스팅합니다.
  return a + b;
};

var multiply;  // 변수는 선언부만 끌어올립니다.

console.log(sum(1, 2));
console.log(multiply(3, 4));

multiply = function (a, b) {  // 변수의 할당부는 원래 자리에 남겨둡니다.
  return a * b;
};

함수 선언문은 전체를 호이스팅한 반면 함수 표현식은 변수 선언부만 호이스팅했다.
함수도 하나의 값으로 취급할 수 있다는 것이 바로 이런 것이다. 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식이다.

 

 

 

🔥 함수 선언문의 위험성

실무에서 발생할 수 있는 현실적인 예가 있다.
개발자 A가 sum 함수 선언을 했다. 그런데 어느날 새로 입사한 B가 같은 파일의 5000번째 줄에서 sum 함수를 새로 선언했다.
동일한 변수명에 서로 다른 값을 할당할 경우 나중에 할당한 값이 먼저 할당한 값을 덮어씌운다. 따라서 코드를 실행하는 중에 실제로 호출되는 함수는 오직 마지막에 할당한 함수, 즉 맨 마지막에 선언한 함수뿐이다.


이 때, A와 B 모두 sum 함수를 함수 표현식으로 정의했다면 5000번째 줄 이전까지는 A의 의도대로, 5000번째 줄 이후부터는 B의 의도대로 잘 동작했을 것이다.

function sum (x, y) {  // 💩
  return x + y;
}
var sum = function (x, y) {  // 👍🏻
  return x * y;
}

원활한 협업을 위해서는 전역공간에 함수를 선언하거나 동명의 함수를 중복 선언하는 경우는 없어야 한다.