피리부는 사나이 (pied piper)

[JS] 콜백 함수 본문

Java Script

[JS] 콜백 함수

코더 451 2022. 2. 16. 09:29

JS에선 함수도 객체, 일종의 값이 될 수 있음

이것이 다른 언어의 함수와 다름 점

function a () {} 

//함수 a가 선언됐다. JS에선 함수는 객체의 값으로 포함될 수 있다.
a = {
    b:function(){
    }
};

//그런면에서 볼 때 함수명 a라는 변수에 함수b가 값으로 담겼다고도
//볼 수 있을 것이다. 

그리고 이렇게 '객체'의 '속성값'으로 담겨진 함수가 
**메소드이다.** 

함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다. 아래 예제를 보자.

 

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

함수는 함수의 리턴 값으로도 사용할 수 있다.

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

당연히 배열의 값으로도 사용할 수 있다.

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

처리의 위임

 💡 함수의 인자로 함수를 전달할 수 있다고 했다. 이로써 함수의 동작을 완전히 바꿀 수 있다.

함수는 두 가지로 나눌 수 있다.

  1. 자바스크립트 객체에 내장되어있는 내장객체, 빌트인 메소드 2.우리가 흔히 만들어 선언하는 정의함수

즉 객체내 메소드의 ‘오리지널’ 기능을 인자에 함수를 전달함으로써 자유롭게 변경할 수 있다는 것 이것이 콜백의 필요성이다.

 

예시)

numbers = [숫자, 숫자, 숫자]; // numbers라는 배열 선언

배열이 갖고 있는 메소드중에 sort라는 것이 있음

numbers.sort(sortfunc);

  💡

앞에 있는 것은 객체이다. sort(sortfunc)는 배열의 메소드이다 /코드 원소들간에 무엇이 우선인지를 판단하는 기능을 함

 

 

function sortNumber(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]

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다

Comments