자바스크립트 완벽가이드 - 8.3 데이터로서의 함수

이전 절에서 살펴본 것 같이 함수의 가장 중요한 특징은 프로그램 상에서 정의되고 또 호출될 수 있다는

점이다. 함수 정의와 호출은 자바스크립트는 물론 다른 프로그램 언어 대부분의 문법적 특징이다.

 

하지만 자바스크립트에서 함수는 문법일뿐만 아니라 데이터이기도 하다.

즉 함수는 변수에 할당되거나 객체 프로퍼티와 배열 원소들에 저장될 수 있고 함수의 전달인자 등으로도

사용될 수 있다.^[각주:1]

함수가 자바스크립트 문법뿐만 아니라 어떻게 자바스크립트 데이터가 될 수 있는지 이해하기 위하여

다음의 함수 정의에 대해 생각해 보라.

function square(x) { return x*x; }

이 정의는 함수 객체를 생성하고 이를 변수 square에 할당한다. 함수의 이름은 별로 중요한 것이 아니다.

이것은 단지 함수를 가리키는 변수의 이름일 뿐이다. 함수를 다른 변수에 할당할 수도 있으며,

그래도 함수는 여전히 똑같이 작동한다.

var a = square(4);  // a에는 숫자 16이 저장된다.
var b = square;      // 이제 b에는 square 같은 함수를 가리킨다.
var c = b(5);          // c에는 숫자 25가 저장된다.

함수는 전역 변수뿐만 아니라 객체 프로퍼티에도 할당될 수 있다.

이렇게 객체 프로퍼티에 할당된 함수를 메서드라 부른다.

var o = new Object;
o.square = function(x) { return x*x; }  // 함수 리터럴
y = o.square(16);                              // y에는 256이 저장된다.

배열 원소에 함수를 할당하는 경우에 함수는 심지어 이름조차 필요로 하지 않는다.

var a = new Array(3);
a[0] = function(x) { return x*x };
a[1] = 20;
a[2] = a[0](a[1]);                           // a[2]에는 400이 저장된다.

마지막 예의 함수 호출 구문은 낯설게 보일 수 있으나 여전히 적법한 형태로 자바스크립트() 연산자를 사용한 것이다!

예 8-2는 함수를 데이터로서 사용할 때에 할 수 있는 것들을 보여 준다. 이 예는 어떻게 함수를 다른 함수의

전달인자로 건넬 수 있는지 보여 준다. 약간 막연하고 종잡을 수 없어 보이기도 하지만 주석을 통해서

정확한 작동을 설명하겠다. 이 예는 신중하게 공부할 가치가 있다.

앞의 예를 통해서 함수를 다른 함수의 전달인자로 건네거나 함수를 데이터 값으로 사용하는 것의 용도가

납득되지 않는다면, Array.sort() 함수를 떠올려보자. 이 함수는 배열 원소들을 정렬한다.

원소들의 순서를 정의하는 방법은 매우 다양하기 때문에(숫자 순서나 알파벳 순서, 날짜 순서, 오름차순, 내림차순 등의 방법이 있다), sort() 함수는 정렬을 어떻게 수행해야 하는지를 알려주는 함수를 선택적 전달인자로 받는다. 이 함수가 하는 일은 단순하다. 배열의 두 원소를 받아서 그 둘을 비교하고 어떤 원소가 다른 원소보다 앞에 와야 하는지를 명시하는 값을 반환한다. 이 함수 전달인자 덕분에 Array.sort() 메서드는 완전히 일반적이자 무한히 유연한 함수로서 작동할 수 있다. Array.sort() 메서드는 어떤한 종류의 데이터든 간에 상상할 수 있는 모든 방식으로 정렬할 수 있다!(Array.sort()의 사용 예는 7.7.3항을 참고하라.)

예 8-2 함수를 데이터로서 사용하기

// 간단한 함수들을 몇 개 정의한다.
function add(x,y) { return x + y; }
function subtract(x,y) { return x - y; }
function multiply(x,y) { return x * y; }
function divide(x,y) { return x / y; }

// 여기에 정의한 함수는 위의 연산자 함수 중 하나를 전달인자로 받아서
// 두 개의 피연산자와 함께 호출한다.
function operate(operate, operand1, operand2)
{

return operator(operand1, operand2);

}

// (2+3) + (4*5) 같은 수식을 계산하기 위해선 다음과 같이 함수를 호출한다.
var i = operate(add, operate(add, 2, 3), operate(multiply, 4, 5));

// 예를 위하여 위에서 정의한 간단한 함수들을 함수 리터럴을 사용하여
// 다시 정의한다. 함수 리터럴들은 객체 리터럴의 안에 두라.
var operators = {

add: function(x,y) { return x+y; },
subtract: function(x,y) { return x-y; },
multiply: function(x,y) { return x*y; },
divide: function(x,y) { return x/y; },
pow: Math.pow // 이미 정의되어 있는 함수도 사용할 수 있다.

}

// 이 함수는 연산자 함수의 이름을 전달인자로 받아서 작동한다.
// 객체 안에서 연산자 함수를 검색한 후에, 주어진 피연산자들과 함께 호출한다.
// 연산자 함수를 호출하는 구문을 주의하여 보라.
function operate2(op_name, operand1, operand2)
{

if (typeof operators[op_name] == "function")

return operators[op_name](operand1, operand2);

else throw "unknow operator"; // '알 수 없는 연산자'

}

// ("hello" + " " + "world") 같은 표현식의 값을 계산하기 위하여
// 다음과 같은 방법으로 함수를 호출할 수 있다.
var j = operate2("add", "hello", operate2("add", " ", "world"));
// 이미 정의된 함수 Math.pow() 함수를 사용하는 예는 다음과 같다.
var k = operate2("pow", 10, 2);

1. 만약 여러분이 익숙한 프로그램 언어가 자바(java)뿐이라면 이 점은 매우 흥미로울 것이다. 자바에서 함수는 프로그램의 일부이며 프로그램에 의하여 조작될 수 없다. [본문으로]