JS ) 함수를 생성하는 방법

함수를 정의하는 방법

JavaScript 에서 함수를 정의하는 방법은 4가지가 있습니다.

함수 선언문

function add(x,y) {
  return x+y;
}

• 함수 선언문은 함수 이름을 생략할 수 없습니다.

함수 표현식

var add = function(x,y){
  return x+y;
};

함수 선언문 vs 함수 표현식

함수 선언문으로 정의한 함수는 함수 선언문이전에 호출이 가능합니다. 하지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출이 불가능합니다.
이는 함수 선언문과 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문입니다.

함수 선언문은 런타임 이전에 JS 엔진에 의해 먼저 실행됩니다. 즉, 함수 선언문으로 함수를 정의한 경우 런타임 이전에 함수 객체가 먼저 생성됩니다. 그리고 JS 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당합니다.

코드가 한 줄씩 순차적으로 실행되기 시작하는 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태이기 때문에, 함수 선언문 이전에 함수의 참조와 호출이 가능합니다.
이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징을 함수 호이스팅이라고 합니다.

함수 표현식 은 변수에 할당되는 값이 함수 리터럴인 문입니다. 따라서 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작합니다.

변수 선언은 런타임 이전에 실행되어 undefined 로 초기화되지만, 변수 할당문의 값은 할당문이 실행되는 시점, 런타임에 평가되므로 함수 표현식의 함수리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 됩니다.

따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라, 변수 호이스팅이 발생합니다.

Function 생성자 함수

var add = new Function('x', 'y', 'return x+y');

• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지 않습니다.

• Function 함수로 생성한 함수는 클러져를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작합니다.

화살표 함수 (ES6)

var add = (x,y) => x+y;

• function 키워드 대신 화살표를 사용해 좀 더 간단한 방법으로 함수를 선언할 수 있습니다.

• 화살표 함수는 항상 익명 함수로 정의합니다.

위는 모두 같은 기능을 담당하는 함수입니다.

---

참고도서 : Deep Dive