함수

자바스크립트 함수는 실행 가능한 코드가 담긴 특별한 객체다. 함수는 여러 번 호출될 수 있고, 인자를 전달받을 수 있다.

자바스크립트에서 함수는 숫자와 문자열과 같은 자료형이자 값이므로 변수, 배열, 객체에 저장될 수 있으며 다른 함수에 인자로 전달할 수 있다.

함수를 객체의 프로퍼티로 할당할 경우 해당 함수를 그 객체의 메서드라 한다.

함수 선언

함수 선언문을 이용해 함수를 생성할 수 있으며, 문법은 다음과 같다.

function function_name(arg1, arg2, ...){
    // 함수 본문
}

함수는 코드상의 어느 곳에도 선언할 수 있으며, 함수 선언은 브라우저가 코드를 실행하기 위해 준비하는 단계인 실행 전 단계(pre-execution stage)에서 파싱된다.

함수는 정의하기 전이나 후에 호출할 수 있다. 함수 선언의 예는 다음과 같다.

sayHello('Tom');        // Hello, I am Tom

function sayHello(name){
    console.log("Hello, I am " + name);
}

함수 표현식

자바스크립트 함수 표현식은 function 키워드로 정의하며, 다음으로 선택적인 함수명과 괄호로 둘러싸인 인자 목록, 중괄호로 둘러싸인 함수 본문이 차례로 이어진다. 문법은 다음과 같다.

function(arg1, arg2, ...){
    // 함수 본문
}

함수 표현식은 다른 자바스크립트 표현식 내에서 나타날 수 있는데, 값을 집어넣을 수 있는 곳이라면 어떤 곳이든 함수 표현식을 집어넣을 수 있다. 다음 예제를 보자.

var sayHello = function(name){
    console.log("Hello, I am " + name);
}
sayHello('Tom');        // Hello, I am Tom

함수 표현식은 그것들이 실행될 때만 생성되므로 실행되고 난 후에야 사용될 수 있다. 다음 예제를 보자.

sayHello('Tom');        // TypeError: sayHello is not a function
var sayHello = function(name){
    console.log("Hello, I am " + name);
}

값을 반환하는 함수

함수에서는 return 문을 이용해 값을 반환할 수 있다.

function multiply(x, y){
    return x*y;
}
console.log(multiply(5,5)); // 25

값을 반환하지 않는 함수는 undefined를 반환한다.

function multiply(x, y){
    var result = x*y;
}
console.log(multiply(5,5)); // undefined

빈 리턴문도 undefined를 반환한다.

function multiply(x, y){
    var result = x*y;
    return;
}
console.log(multiply(5,5)); // undefined

지역 변수

함수 안에서 var를 이용해 변수를 정의할 수 있는데, 이렇게 정의한 변수를 지역 변수라 하며 해당 함수 내에서만 접근할 수 있다.

function multiply(x, y){
    var result = x*y;
    return result;
}
console.log(multiply(5,5)); // 25
console.log(result);        // ReferenceError: result is not defined

함수는 값이다

자바스크립트 함수는 평범한 값이며, 선언과 표현식에서 모두 변수를 선언하고 함수를 해당 변수에 집어넣는다.

다음과 같이 함수를 다른 변수에 할당하는 것도 가능하다.

function multiply(x, y){
    return x*y;
}
var m = multiply;
console.log(m(5,5));        // 25

함수는 참조로 할당되므로 m과 multiply 변수는 모두 같은 함수를 참조한다.

함수를 다른 함수에 인자로 전달하는 것도 가능하다.

function multiply(x, y){
    return x*y;
}

function doSomething(f){
    return f(5,5);
}

console.log(doSomething(multiply));     // 25

스스로 호출하는 익명 함수

자바스크립트에서는 일반적으로 함수를 특정 시점에 정의하고 나중에 해당 함수를 호출한다. 스스로 호출하는 함수를 이용하면 브라우저에서 함수 정의를 파싱할 때 해당 함수가 실행된다. 문법은 다음과 같다.

(function () {
    // 함수 본문
}());

보다시피 괄호 안에 함수를 집어넣을 필요가 있는데, 스스로 호출하는 함수는 반드시 함수 표현식이어야 하기 때문이다. 또 다른 문법은 다음과 같다.

(function () {
    // 함수 본문
})();

스스로 호출하는 함수의 이점은 코드를 한 번 실행해야 하지만 전역 또는 심지어 지역 변수로도 선언하고 싶지 않은 경우다. 예제에서는 함수에 대한 참조를 유지하지 않았다. 함수가 초기화되고 나서 구문 끝의 () 때문에 함수가 곧바로 호출된다.

이 방법은 초기화할 때 굉장히 유용한데, 함수에 대한 참조를 유지하지 않기 때문에 딱 한 번만 수행되게 할 수 있다.

다음 예제를 보자.

(function (){
    console.log("Hello world!");    // Hello world!
})();

스스로 호출하는 함수에 매개변수를 전달할 수도 있다. 다음 예제를 보자.

var result = (function (x, y){
    return x*y;
})(6,6);
console.log(result);    // 36

아울러 다른 전역 객체에 대한 참조를 갖게 하는 것이 일반적인 관례다. 다음 예제를 보자.

(function (w, d, $) {
   // 함수 본문
}(window, document, jQuery));

스스로 호출하는 명명 함수

스스로 호출하는 함수에 이름을 부여할 수도 있지만 이름은 해당 함수 안에서만 볼 수 있다. 다음 예제를 보자.

(function sayHello(){
    console.log(sayHello); //함수의 소스 코드를 출력
})();

console.log(sayHello);     //ReferenceError: sayHello is not defined

이름을 지정함 함수는 재귀 호출에 사용할 수 있다. 다음 예제를 보자.

var result = (function factorial(n){
    return n == 1? n: n*factorial(n-1)
})(6);

console.log(result);    // 720

함수