Extremely Agile - JavaScript에서의 function()

JavaScript에서의 function() :: 2008/09/01 13:47

JavaScript에서 함수를 정의할 때 function()을 통해서 하게 됩니다. function()을 사용할 때 유의해야 할 점은, function()의 결과로 만들어지는 것이 함수 객체 (function object) 라는 점입니다.

따라서 JavaScript에서 function은 다음과 같이 쓰일 수 있습니다.

var obj = functioni() { ... }

obj가 함수의 이름이 되는 꼴이죠.

존 레식은 자신의 저서 "프로 자바스크립트 테크닉"의 앞부분에서 다음과 같은 예제를 보여줍니다.

function addGenerator( num ) {
return function( toAdd ) {
return num + toAdd;
}
}

var addFive = addGeneraator( 5 );

alert( addFive(4) == 9 );

함수가 객체이기 떄문에 함수 안에서 리턴하는 것도 가능하고, 함수를 인자로 받는 것도 가능합니다. 위의 코드는 그런 특성을 사용하고 있습니다.

함수가 객체라는 것은, 함수의 코드가 '데이터'라는 것, 그리고 그 '데이터'를 조작하기 위한 메소드가 해당 객체 내에 바인딩 되어 있을 것이라는 점을 시사합니다. 가령 다음 코드를 보면... (역시 존 레식의 "프로 자바스크립트 테크닉"에서 빌려왔습니다.)

function changeColor( color ) {
this.style.color = color;
}

...

var main = document.getElementById( 'main' );

changeColor.call( main, "black" );

여기서 call은 changeColor를 호출하되 그 함수가 바인딩될 객체(즉, this가 가리키는 객체. 다른 말로 하면 컨텍스트)를 main으로 하여 호출해 줍니다. C++식으로 이야기하자면 이 call 이라는 함수는 changeColor 객체의 멤버 함수(즉, 메소드)가 되는 셈입니다. 이런 특성이 JavaScript라는 프로그래밍 언어가 갖는 언어적 단순성이 단순히 단순함에 머무르지 않고 다양한 방식으로 풍부해질 수 있도록 만듭니다.

함수와 객체를 구별하는 것이 의미가 없게 하는 이런 특성은 비단 JavaScript 뿐 아니라 Erlang같은 함수형 프로그래밍 언에서도 쉽게 찾아볼 수 있습니다.

가령 얼랑 셸에서 다음과 같이 했다고 해 봅시다.

1> Double = fun(X) -> 2 * X end.

이렇게 하면 X를 인자로 받아 그 값을 두 배 하는 함수가 만들어지고, 그 함수를 Double이라는 이름으로 사용할 수 있게 됩니다. 이렇게 만들어진 함수를 lists:map(F, L)에 넘기면, 리스트에 담긴 모든 원소의 값을 2 배한 새로운 리스트를 만들수 있습니다.

2> L = [1, 2, 3, 4].
3> list:map( Double, L ).
[2, 4, 6, 8].

만일 위의 addGenerator같은 역할을 하는 function을 Erlang으로 만들고자 한다면, 다음과 같이 하면 될 것입니다.

4> AddGenerator = fun(Num) -> ( fun(X) -> NUm + X end ) end.

이렇게까지 하고 나면 이제

5> AddFive = AddGenerator(5).

하고 나서

6> AddFive(4).
9.

처럼 동일한 결과를 얻을 수 있게 되죠.

JavaScript는 '객체지향적인 프로그래밍 언어'이고 '객체'라는 개념을 이처럼 '함수'에까지 확장하고 있기 때문에 C++같은 좀 오래된 객체지향 언어보다는 좀 더 공격적인 객체지향 프로그래밍을 할 수가 있습니다.