자바스크립트 기본 - 값으로서의 함수와 콜백

값으로서의 함수와 콜백 - https://opentutorials.org/course/743/6508

자바스크립트에서는 함수도 객체다. 일종의 값이다.

var a = "value" 에서 value를 a에 담을 수 있다. 기서은 value가 값이기 때문이다.

자바스크립트의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

아래의 두 줄은 같은 의미이다. 함수를 값으로 사용할 수 있다는 것이다.

---

var a = function(){}

function a(){} 

---

여기에서 a는 객체이며 b는 key(값을 저장하는 그릇)이며 function()은 메소드이다.

객체 안에 정의되어 있는 함수는 메소드라고 부른다.

---

a = {

    b:function(){

    }

};

---

아래 예제를 통해 함수가 다른함수의 인자로 가는 것을 확인 할 수가 있다.

---

function cal(func, num){ 

    return func(num) //cal의 첫번째 인자로 전달된 func에 담겨 있는 함수를 호출하면서 두번째 인자로 전달된 값을 그 호출된 함수의 첫번째 인자로 전달한다.

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

alert(cal(increase, 1)); //이 구문이 실행된다면 코드 내부적으로 아래와 같이 실행된다.

/*

increase함수가 cal함수의 첫번째 인자로 전달 되었다.

function cal(increase, 1){ 

    return increase(1)

} 

리턴값으로 increase함수가 호출되어 아래의 함수가 실행되고

function increase(1){

    return 1+1

}

결국 2를 반환하여 alert(2);가 된다.

*/

alert(cal(decrease, 1));

---

함수는 리턴값으로도 사용된다.

---

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

/*

cal('plus')는 cal함수의 mode인자에 plus를 준다는 뜻이며 return값에 있는 funcs[mode] -> funcs[plus]가 된다.

funcs[plus]는 funcs객체 안에 있는 'plus'의 값을 뜻하며 function(left, right){return left + right}을 가리킨다.

즉 cal('plus') 은 function(left, right){return left + right} 을 가리킨다.

(2,1)인자를 주었기 때문에 return값은 2+1 = 3이 된다.

*/

alert(cal('minus')(2,1)); 

---

함수는 배열의 값으로도 사용된다.

---

var process = [

    function(input){ return input + 10;},       //i의 값이 0일때 호출되며 input값은 1이다.

    function(input){ return input * input;},    //i의 값이 1일때 호출되며 input값은 11*11=121이다.

    function(input){ return input / 2;}         //i의 값이 2일때 호출되며 input값은 121/2=60.5이다.

];

var input = 1;

for(var i = 0; i < process.length; i++){ //process함수의 길이는 3이기 때문에 i는 0,1,2까지 불러진다.

    input = process[i](input);

}

alert(input); //for문이 끝나고 마지막 input값인 60.5가 출력된다.

---

콜백  : 어떠한 함수가 수신하는 인자가 함수인 경우

---

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], 함수를 인자로 전달한다. 

//numbers.sort()은 배열객체.sort()이다. 여기서 sort()는 객체에 속해있기 때문에 메소드라고 부른다.

//sortNumber은 콜백함수이며 자바스크립트에서 기본적으로 지원하는 sort()메소드에 콜백함수를 인자로 넣음으로써 sort()메소드의 기능을 바꿀 수 있게 된다.

---