[JS] 14_02강 값으로서의 함수와 콜백

정수연·2022년 3월 29일
0
post-thumbnail

함수의 다양한 용도

JS에서의 함수객체이고, 일종의 이다.
다시말해
변수, 객체의 값, 함수의 인자, 함수의 리턴값, 배열의 값
등 으로 사용될 수 있다.

// 1) 값으로서의 함수
function a() {} // var a = function() {}
// 함수 a는 변수 a에 담겨진 값

// 2) 함수는 객체의 값으로도 포함 가능***
a = {
    b : function() { // b : 키(속성), func : 값
    // key가 변수의 역할을 수행할 경우, 속성(property)이라고 할 수 있음
    // 객체의 속성값으로 담겨진 함수 = 메소드(method) 
    }
};

// 3) 함수는 다른 함수의 인자로 전달 가능
function cal(func, num){
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1));
alert(cal(decrease, 1));

// 4) 함수는 '함수의 리턴 값(반환값)'으로 사용 가능
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));

// 5) 함수는 '배열'로도 사용가능
var process = [
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
alert(input);
/*
(i = 0)
input = process[0](1); // 11
(i = 1)
input  = process[1](11); // 11 * 11 = 121
(i = 2)
input = process[2](121); // 121 / 2 = 60.5
*/

콜백

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
var sortfunc = function(a, b) {
	return a - b; // 아래와 같은 결과값, 오름차순
 // return b - a; 의 경우에는 내림차순
  /*
  	if (a > b) {
      return 1;
    } else if (a < b) {
      return -1;
    } else {
    	return 0;
    }  
  */
}
console.log(numbers.sort(sortfunc));
  • numbers.sort()에서 numbers가 배열 객체이기 때문에 sort()는 메소드이다.
  • numbers.sort(sortfunc)에서 sortfunc()함수콜백함수가 된다.
  • 콜백(callback) : 값을 변경 ⇒ 오리지널 함수의 동작 방법을 변경 가능함 (즉, JS에서 함수가 값이기 때문에)
    ex) sort() 메소드가 sortfunc를 인자로 전달받아서 sort()메소드의 동작방법을 변경할 수 있다.
    ** 추후 복습 need

비동기 콜백과 Ajax

  • 콜백은 비동기 처리에도 유용하게 사용된다.

cf. 동기 vs 비동기 개념은 아래 블로그를 참고하자.
(https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC)

0개의 댓글