자바스크립트 함수 정의

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다.

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

먼저 함수 리터럴의 개념부터 살펴봐야 한다.

• 자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다.
• 그래서 객체 리터널 방식으로 일반 객체를 생성할 수 있는 것처럼, 함수 리터럴을 이용해 함수를 생성할 수 있다.
• 셀제로 함수 선언문이나 함수 표현식 방법 모두 이런 함수 리터럴 방식으로 함수를 생성한다.

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

 

1. 함수 선언문 방식으로 함수 생성하기

• 함수 선언문 방식은 함수 리터럴 형태와 같다. 여기서 주의할 점은 함수 선언문 방식으로 정의된 함수의 경우 반드시 함수명이 정의되어 있어야 한다.
• C/C++에서 사용하는 함수 정의 방법과 유사하지만, function이라는 키워드를 명시적으로 사용하고 리턴 값과 매개변수로 넘기는 값에 변수 타입 (int, char 등)을 기술하지 않아도 된다.

//add() 함수 선언문
function add(x, y) {
    return x + y;
}

console.log(add(1, 2)); //3

 

2. 함수 표현식 방식으로 생성하기

• 자바스크립트에서는 함수도 하나의 값처럼 취급된다. ( 함수를 일급 객체라고도 한다 )
• 생성된 함수를 변수에 할당하여 생성하는 것을 함수 표현식이라고 한다.

//add() 함수 선언문
var add = function (x, y) {
    return x + y;
};

console.log(add(2, 3)); //5

var plus = add;

console.log(plus5,6));  // 11

• 함수 표현식은 함수 이름이 선택 사항이다. 
• 여기서는 함수 명이 없으므로 익명 함수라고 한다.
• plus에도 그 값을 그대로 할당할 수 있다.

참고로 함수 이름이 포함된 함수 표현식을 기명 함수 표현식이라고 한다. 주의할 사항이 있다.

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

console.log(add(2, 3)); //5
console.log(sum(3, 4));
//Uncaught ReferenceEerror : sum is not defined 에러발생

• 이것은 함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근이 불가능하다.
• 실제로 함수 표현식에서 사용된 함수 이름은 정의된 함수 내부에서 해당 함수를 재귀적으로 호출하거나, 디버거 등에서 함수를 구분할 때 사용된다.

var factorialVar = function factorial(n) {
    return n * factorial(n - 1);
};

console.log(factorialVar(3)) //6
console.log(factorial(3)) // factorial is not defined

• 함수 외부에서는 함수 변수 factorialVar로 함수를 호출했으며, 함수 내부에서 이뤄지는 재귀 호출은 factorial() 함수 이름으로 처리된 것을 볼 수 있다.
• 앞서 설명한 것과 마찬가지로 factorial() 함수는 호출하지 못하고 에러가 발생한다.

 

그렇다면 함수 선언문으로 정의된 add() 함수는 어떻게 함수 이름으로 함수 외부에서 호출이 가능할까?

함수 선언문 형식으로 정의된 add() 함수는 자바스크립트 엔진에 의해 함수 표현식 형태로 변경되기 때문이다.

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

 

 

3. Function() 생성자 함수 생성하기

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

• 이 방법은 자주 사용되지 않으므로, 실제 사용보다는 다른 사람이 작성한 소스를 분석할 경우도 있기에 상식 수준으로 알아두도록 한다.

 

하나의 관습

• 일반적으로 자바스크립트 코드를 작성할 때 함수 선언문 방식으로 선언된 함수의 경우 함수 끝에 세미콜론(;)을 붙이지 않는다.
• 함수 표현식 방식의 경우는 세미콜론(;)을 붙이는 것을 권장한다.

 

 

출처

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