# 값으로서의 함수와 콜백

## 값으로서의 함수와 콜백

```javascript
function a(){}
```

**JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다.**

```javascript
a = {
    b:function(){
    }
    // 객체 안에 저장되어 있는 메소드 
};
```

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-M_FLjiM4g2gCx_zsXf9%2F-M_FOeeeTj7MxCetuGOY%2Fimage.png?alt=media\&token=165df22d-cf79-42fc-99f6-43ba437f6c76)

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

### **값으로서의 함수**&#x20;

```javascript
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  
```

10행을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다. 함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 두번째 인자의 값이 1을 인자로 전달한다. 함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴한다.

```javascript
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 
```

함수는 **함수의 리턴 값**으로도 **사용**할 수 있고,

```javascript
var process = [
    function(input){ return input + 10;}, // i -> 0
    function(input){ return input * input;},  // i -> 1
    function(input){ return input / 2;}  // i -> 2
    // 1 +10  ->  11 x 11 -> 121 /2 -> 60.5
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
alert(input); // 60.5
```

**배열의 값**으로도 **사용할 수 있다.**

### 콜백

#### 처리의 위임

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

```javascript
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 는 메소드 또는 내장객체 
// sort -> 값을 계속 비교하는 역활을 한다. 
```

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

### 비동기 처리

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

(to do list처럼 해야할것을 한꺼번에 하지 않고, 적어놓고 나중에 그것을 처리하는것과 비슷하다.)

&#x20;**datasource.json.js**

```javascript
{"title":"JavaScript","author":"egoing"}
```

&#x20;**demo1.html**

```javascript
<!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>
```
