[JS] 값으로서의 함수와 콜백 (1)

JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다.

function a(){}

위의 예제에서 함수 a는 변수 a에 담긴 값이다.

 

a = {
    b:function(){
    }
};

다음과 같이 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체에 담긴 함수 b와 같은 것을 메서드(method)라고 부른다.

 

function cal(func, num){	// func = increase, num = 1	// func = decrease, num = 1
    return func(num)		// increase(1)			// decrease(1)
}

function increase(num){		// num = 1
    return num+1		// return 2
}

function decrease(num){						// num = 1
    return num-1						// return 0
}

alert(cal(increase, 1));	// 2 출력
alert(cal(decrease, 1));					// 0 출력

 

function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode];
}

alert(cal('plus')(2,1));	// 3 출력
alert(cal('minus')(2,1));	// 1 출력

함수는 다음과 같이 함수의 리턴 값으로도 사용할 수 있다.

 

var process = [
    function(input){ return input + 10;},	// return 1 + 10 (11)
    function(input){ return input * input;},	// return 11 * 11 (121)
    function(input){ return input / 2;}		// return 121 / 2 (60.5)
];

var input = 1;

for(var i = 0; i < process.length; i++){
    input = process[i](input);
}

alert(input);	// 60.5 출력

다음과 같이 배열로도 사용 가능하다.

 

콜백

function sortfunc(a,b){
    // a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
console.log(numbers.sort(sortfunc))		// [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

값으로써 함수를 사용할 수 있기 때문에 함수의 동작 방법을 바꿀 수 있다는 것이 콜백 이고 콜백이 가능한 이유는 자바스크립트의 함수가 값이기 때문이다.

 

처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.

위 코드에서 인자로 전달된 함수 sortfunc의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

 

참고

생활코딩