값으로서의 함수와 콜백

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

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

function a() {} // var a = function(){} 와 같다.

또한, 값으로서의 함수는 "값(value)"이기 때문에 객체의 값으로 포함될 수도 있다. 이렇게 객체의 속성값으로 담겨진 함수를 메소드(method)라고 부른다.

그리고 객체 안에서 b는 'key', 속성, 'property' 라고 부른다.

//a라는 객체 정의
a {
    b:function() {//b라는 key에 함수값이 할당.
    
    }
}

  1. 함수의 용도1 : 함수의 매개변수

function cal(func, num) {
    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

cal(increase,1) : 첫 번째 매개변수로써 increase 함수가 전달되어, cal 함수 내에서 increase 함수가 호출된다. increase 함수의 매개변수로 num = 1이 전달되어 2라는 값을 리턴한다.

마찬가지로 cal(decrease,1)에서는 첫 번째 매개변수로써 decrease 함수가 전달되어, cal 함수 내에서 decrease 함수가 호출된다. decrease 함수의 매개변수로 num = 1이 전달되어 0라는 값을 리턴한다.

2. 함수의 용도2 : 함수의 리턴 값

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

cal('plus')(2,1) : plus가 cal함수에 전달되고 cal함수의 리턴 값은 funcs[plus]다. cal함수 내부에는 funcs라는 객체가 생성되어있는데, funcs[plus]라 하면 메소드 plus에 해당하는 function이 실행되어 2+1인 '3'이라는 값을 리턴한다.

cal('minus')(2,1) : plus가 cal함수에 전달되고 cal함수의 리턴 값은 funcs[minus]다. cal함수 내부에는 funcs라는 객체가 생성되어있는데, funcs[minus]라 하면 메소드 minus에 해당하는 function이 실행되어 2-1인 '1'이라는 값을 리턴한다.

3. 콜백

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

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

4. 비동기 콜백

콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 작업이 완료된 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. (참고:다음 코드에서는 일반 환경에서는 작동하지 않고 서버 환경에서만 동작한다.)

AJAX(Asynchronous Javascript And XML)

사용자가 페이지를 다시 로딩하지 않아도 그 내용을 볼 수 있다. 이것은 내부적으로는 자바스크립트를 통해서 서버에 정보를 요청하기 때문에 가능한 것다.

//json형태의 객체 데이
{"title":"JavaScript","author":"egoing"}
//json형태의 객체 데이
{"title":"JavaScript","author":"egoing"}

get이라는 메소드가 서버에 정보를 요청한다. 하지만 정보를 요청하는 중에 사용자에게 어떤 행위를 하는 것을 AJAX로 할 수 있다.콜백함수를 통해서(함수를 매개변수로 전달함으로써) get이 동작하는 것을 완전히 바꿀 수가 있다.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">

$.get(url,//get 메소드가 첫번째 인자의 url의 데이터를 읽는다.그리고 두번째 인자인 함수를 호출한다.
    function(result){//매개변수 result에는 json 객체데이터가 들어간다.
        console.log(result);
    },'json');
</script>
</body>
</html>

Previous함수 지향Next클로저(Closure)

Last updated

Was this helpful?