Javascript 값으로서의 함수와 콜백

값으로서의 함수

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

function a(){}

위의 코드에서 함수 a는 변수 a에 담겨진 값이다.

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

또한 위의 코드에서처럼 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.

function cal(func, num){
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1));
alert(cal(decrease, 1));

위의 코드처럼 함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다.
alert(cal(increase, 1));을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다.
함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 두번째 인자의 값이 1을 인자로 전달한다. 함수 increase은 계산된 결과를 리턴하고 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));
alert(cal('minus')(2,1));

위의 코드처럼 함수를 return funcs[mode];처럼 함수의 리턴 값으로도 사용할 수 있다.

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

위의 코드처럼 함수를 'var = process' 안의 배열처럼 배열의 값으로도 사용할 수 있다.

콜백

처리의 위임

function sortNumber(a,b){
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber));

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.
.sort()의 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.
.sort()는 배열을 정렬한다. 알파벳은 알파벳 순서로 정렬하며 숫자의 경우 암시적으로 문자열로 형변환 하기 때문에 숫자 1이 숫자 10보다 먼저 나온다.
※ return= b-a; 을 return=a-b;로 바꾸면 배열 순서 결과값이 반대로 바뀐다.

비동기 처리

콜백은 비동기처리에서도 유용하게 사용된다.
시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $.get('./datasource.json.js', function(result){
        console.log(result);
    }, 'json');
</script>
</body>
</html>

위의 코드는 비동기 처리를 예를 들기 위한 jQuery을 사용한 코드이다.
$.get(url,url로 불러온 데이터를 이용해서 하려는 행동(함수),저장되는 데이터 형태);로 jQuery을 해석할 수 있다.
jQuery 안에 들어있는 function(result){console.log(result);가 불러온 데이터를 이용해서 하려는 행동(함수),저장되는 데이터 형태를 각각 맡는다고 할 수 있다. 이 부분이 비동기 처리를 위한 콜백이다.
이러한 콜백 기능을 통해 비동기 처리인 웹 페이지 등에 사용되는 시간이 오래걸리지 않도록 미리 등록한 작업을 실행 할 수 있도록 하는 기능들을 구현해 주는 것이다.

'프로그래밍 개발 > JS 기본 언어' 카테고리의 다른 글

Javascript 클로저 (0)	2020.11.10
Javascript 유사 배열 arguments (0)	2020.11.10
Javascript 함수지향-유효범위 (0)	2020.11.09
Javascript 정규표현식(regular expression)에 대한 기본 (0)	2020.11.09
Javascript API 기본과 언어 문서 (0)	2020.11.09