자바스크립트 기본 - 값으로서의 함수와 콜백
값으로서의 함수와 콜백 - 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()메소드의 기능을 바꿀 수 있게 된다.