# 값으로서의 함수와 콜백

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

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

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

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

![](/files/-M_FOeeeTj7MxCetuGOY)

또한 함수는 객체의 값으로 포함될 수 있다. **이렇게 객체의 속성 값으로 담겨진 함수를 메소드(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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/undefined-13/undefined-10/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
