값으로서의 함수와 콜백

 

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

 

값으로서의 함수

 

매개변수로 함수 넘기기

function a(){} // a 라는 변수에 담긴 함수이다.

a = {
    b:function(){ //함수는 값이기 때문에 a의 메서드b에 저장할 수 있다.
    }
};

function cal(func, num){ //func 라는 매개변수로 함수를 전달할 수 있다.
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1)); //2
alert(cal(decrease, 1)); //0

함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다. 함수 increase 는 num 값을 더하거나 뺀 값을 리턴하고 cal 함수에서 그 값을 다시 리턴한다.

함수값 리턴하기

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)); //2

cal 함수에서 funcs 객체에 있는 plus나 minus 속성중 하나를 선택해 안에 있는 함수를 리턴하고 리턴한 함수를 호출한다.

 

배열의 값으로 함수 이용하기

var process = [ //함수는 배열에도 넣을 수 있다.
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input); 
}
alert(input); //60.5

함수를 배열안에 넣어 배열을 순환하여 실행 할수 있다.

이런 특성덕에 함수를 일급객체(first class object)라고 한다.

 

콜백 - 처리의 위임

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

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

콜백함수를 이용해서 sort 메서드의 결과값을 바꿨다.


비동기 처리

Ajax (asynchronous javascript and xml) 를 제어하여 비동기 적인 작업을 할수 있다.
이때 콜백함수를 이용하여 비동기 처리를 할수 있다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $.get('./datasource.json.js', function(result){
        console.log(result); //{"title":"JavaScript","author":"egoing"}
    }, 'json');
</script>

jquery 를 이용하여 ajax 의 get 함수로 비동기적인 요청을 처리 하였고, json 형식으로 결과값을 받았다.

출처 : https://opentutorials.org/course/743/6508

값으로서의 함수와 콜백 - 생활코딩