1. 함수 정의

함수 정의 방식은 3가지가 있다.

• 함수 선언문
• 함수 표현식 (!권장 방식)
• Function 생성자 함수 (비권장 방식)
  
  
  

1. 1 함수 선언문

---

: 함수명, 매개변수 목록, 함수 몸체로 이루어져 있다.

//형태
function 함수명(매개변수) {
	명령;
	명령;
};
//예시
function square(number) {
	return number * number;
};

1. 2 함수 표현식 (!권장 방식!)

---

: 함수를 선언하고 변수에 할당하는 방식 / 권장 이유는 아래의 함수 호이스팅 참조

//예시
const square = function(number) {
	return number * number;
};

위처럼 함수 표현식에서는 함수명을 생략하는 것이 일반적이지만 만약 함수 표현식에 함수명을 부여해 주었다면 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용해야함!!

EX)

// 기명 함수 표현식(named function expression)
const foo = function multiply(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

1. 3 Function 생성자 함수 (비권장 방식)

---

//형태
new Function(arg1, arg2, ... argN, functionBody)
//예시
const square = new Function('number', 'return number * number');
console.log(square(10)); // 100

2. 함수 호이스팅 (Function Hoisting)

: 함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한 것

const res = square(5);

function square(number) {
  return number * number;
}

자바스크립트는 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅(Hoisting)한다.

함수 표현식을 권장하는 이유

---

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장한다. 즉, 함수 선언, 초기화, 할당이 한번에 이루어진다.
그렇기 때문에 함수 선언의 위치와는 상관없이 소스 내 어느 곳에서든지 호출이 가능하다.

함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다.

함수 표현식은 함수 선언문과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행되므로 이 두가지를 구분하는 것은 중요하다.

함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다고 지적한다.

또한 함수 선언문으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하므로 애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의해야 할 필요가 있다.