[JavaScript] 함수 생성 방식(선언적 함수, 익명 함수, Function() 생성자 함수)

자바스크립트 함수 생성 방식

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다. 이들 방식은 모두 같은 함수를 생성하지만, 각각의 방식에 따라 함수 동작이 미묘하게 차이가 난다.

• 함수 선언문(Function statement)
• 함수 표현식(Function expression)
• Function() 생성자 함수

---

함수 선언문

함수 선언문은 선언적 함수라고 한다. 함수의 이름이 존재하고 컴파일 시점에 함수 정보를 등록한다.(함수의 호이스팅) 그래서 함수를 선언하기 이전에 사용이 가능하다. 함수가 별도의 return문을 사용하지 않는 경우 디폴트로 undefined가 반환된다.

 

console.log(add(2, 3));  // 출력값 5
 
// add() 함수 선언문
function add(x, y) {
    return x + y;
}
 
function add2(x, y) {
    x + y;
}
 
console.log(add(3, 4));  // 출력값 7
 
console.log(add2(3, 4));  // 출력값 undefined

위의 예제는 함수 선언문 형태로 add() 함수와 add() 를 구현한 코드이다. 함수명 add, add2가 있고, 이 함수명으로 함수를 호출하고있다. 

console.log(add(2,3)) 코드 이전에 add() 함수를 구현하지 않았는데도 실행이 되는것은 함수의 호이스팅 때문이다. 

add2() 함수에서는 별도의 return문을 정의해 주지 않았다. 그래서 console.log(add2(3, 4))의 출력이 undefined가 나오는 것이다.

---

함수 표현식

자바스크립트에서는 함수도 하나의 값처럼 취급된다.(함수가 1급 객체인 이유) 따라서 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다. 따라서 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다.

이런 방식으로 함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 말한다.

함수 표현식은 익명 함수 표현식과 기명 함수 표현식 두 가지가 방식이 있다.

1. 익명 함수(anonymous function)

//console.log(add(2, 3));  // TypeError: add is not a function
 
// add() 함수 표현식
var add = function (x, y) {
    return x + y;
};
 
console.log(add(3, 4));  // 출력값 7

위 예제에서 console.log(add(2, 3)); 은 실행되지 않는다. 호이스팅에 의해서 var add; 만 먼저 컴파일 되기 때문이다.  var add는 익명 함수를 할당 받고 있다. 

2. 기명 함수(named function)

var add = function sum(x, y) {
    return x + y;
}
 
console.log(add(3, 4));  // 출력값 7
console.log(sum(3, 4));  // ReferencedError: sum is not defined

add() 함수 호출은 성공적으로 리턴된 반면에, sum() 함수 호출의 경우 에러가 발생한다. 이것은 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능 하기 때문이다.  하지만 왜 add() 함수는 호출이 가능할까? add() 함수는 자바스크립트 엔진에 의해 다음과 같은 함수 표현식 형태로 변경된다.

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

함수 이름과 함수 변수의 이름이 add로 같으므로, 함수 이름으로 함수가 호출되는 것처럼 보이지만, 실제로는 add 함수 변수로 함수 외부에서 호출이 가능하게 된 것이다.

---

Function() 생성자 함수

자바스크립트의 함수도 Function() 이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다. 앞에서 설명한 함수 선언문이나 함수 표현식 방식도 Function() 생성자 함수가 아닌 함수 리터럴 방식으로 함수를 생성하지만, 결국엔 이 또한 내부적으로는 Function() 생성자 함수로 함수가 생성된다고 볼 수 있다.

Fucntion() 생성자 함수로 함수를 생성하는 문법

new Function(arg1, arg2, ... argN, functionBody)

• arg1, arg2, ... argN - 함수의 매개변수
• functionBody - 함수가 호출될 때 실행될 코드를 포함한 문자열

이 방식을 사용한 add() 함수

var add = new Function('x', 'y', 'return x + y');
console.log(add(3, 4)); // 출력값 7

일반적으로 Function() 생성자 함수를 사용한 함수 생성 방법은 자주 사용되지 않으므로 다른 사람이 작성한 소스를 분석할 때 나오는 경우가 있으므로 상식 수준으로만 알아두자

송형주, 고현준, 『인사이드 자바스크립트』, 한빛미디어(2014)