함수의 인자값으로 들어가는 함수인 콜백 함수(CallBack Function)

콜백 함수

자바스크립트에서 함수는 값 처럼 취급을 한다고 했다. 값으로 취급을 하기에 값이 할 수 있는 작업을 함수에게도 할 수있는데. 그것이 바로 콜백 함수이다.

콜백 함수는 어떠한 함수의 인자 값으로 또 다른 함수가 들어가는 것이다. 그 인자 값을 콜백 또는 콜백 함수라고 부른다.

콜백 함수 사용법

콜백 함수

function call(funcPara){
	for(let i = 1; i <= 3; i++){
		funcPara(i);
	}
}

function Output(num){
	console.log(`${num} 번째 출력`);
} 

call(Output); 
/*
1 번째 출력
2 번째 출력
3 번째 출력
*/

 

call 함수가 호출 되었고 Output 함수를 인자 값으로 넣었다.

이때, 함수를 인자 값으로 넣으려면 ( ) 괄호 는 빼고 함수명만 넣어야 한다.

call(Output);

 

call 함수가 호출되면 함수 내부에 있는 코드로 들어가게 된다.

call 함수 내부에는 반복문을 이용해 임의의 함수 funcPara 를 3번 반복하게 되고, 반복을 하기 위해 사용되는 i를 인자값으로 넣는 코드가 적혀있다.

함수가 호출되면서 반복문 내부로 들어가게 되고 반복문 내부에서 call 함수의 매개변수인 funcPara 이자 인자 값으로 주어진 Output 함수를 호출한다.

function call(funcPara){
	for(let i = 1; i <= 3; i++){
		funcPara(i); // Output(i);
	}
}

 

Output 함수가 호출되면 함수 내부에 있는 코드 console.log(`${num} 번째 출력`); 이 실행되고 함수가 종료된다.

function Output(num){
	console.log(`${num} 번째 출력`);
}

 

 

종료됨과 동시에 다시 call 함수 내부의 반복문으로 복귀해서 call 함수의 코드를 마저 진행한다.

위의 과정을 추가로 2번 더 진행하고 함수는 종료된다.

 

콜백 함수를 사용하는 메소드

 

forEach

for문처럼 배열이나 객체의 반복을 수행해주는 메소드이다.

for문과 다른점은 for문에 필요한 조건식과 조건식에 일치시키기 위한 증감 연산 없이 콜백 함수만 사용한다.

forEach

let numary = [100, 200, 300, 400, 500];

numary.forEach(function(value, index, array){
	console.log(`${array}에서 ${index}번째의 값인 ${value} 입니다.`);
});
/* 화살표 함수를 사용했을 시
numary.forEach((value, index, array) => 
	console.log(`${array}에서 ${index}번째의 값인 ${value} 입니다.`)
);
*/
/*
100,200,300,400,500에서 0번째의 값인 100 입니다.
100,200,300,400,500에서 1번째의 값인 200 입니다.
100,200,300,400,500에서 2번째의 값인 300 입니다.
100,200,300,400,500에서 3번째의 값인 400 입니다.
100,200,300,400,500에서 4번째의 값인 500 입니다.
*/

 

 

메소드 사용법을 살펴보면

forEach 메소드 인자 값으로 콜백 함수를 넣었다.

그리고 콜백 함수에서의 매개변수는 순서대로 배열의 요소, 배열의 인덱스, 배열 이다.

numary.forEach(function(value, index, array){
	console.log(`${array}에서 ${index}번째의 값인 ${value} 입니다.`);
});

 

콜백 함수의 매개변수에서 배열의 인덱스와 배열은 생략해도 된다.

numary.forEach(function(value){
	console.log(`${value} 입니다.`);
});

 

또한, forEach 메소드는 반환값이 존재하지 않기 때문에 함수 내부에서 다른 변수로 값을 넘겨주거나 바로 출력하는 식으로 사용해야 한다.

let numary = [100, 200, 300, 400, 500];
let numary2 = [];

numary.forEach(function(value){
	if(value < 200){
    	numary2.push(numary2);
    }
});

console.log(numary2); // [ 300, 400, 500 ]

 

map

map 메소드도 역시 배열이나 객체를 순회하면서 콜백 함수를 실행하는 구조인 것에서 forEach 메소드와 비슷하지만, map 메소드는 반환 값으로 배열을 만들 수 있다.

다시 말해 원래 있던 배열을 이용해 새로운 배열을 만들어 낼 수 있다.

map

let numary = [100, 200, 300, 400, 500];
let numary2;

numary2 = numary.map(function(value, index, array){
	return value * value;
});

/* 화살표 함수를 사용했을 시
numary2 = numary.map((value, index, array) =>
	value * value
);
*/

console.log(numary2); // [ 10000, 40000, 90000, 160000, 250000 ]

 

 

메소드 사용법을 살펴보자면

변수 하나를 선언하고 그 변수에 대한 값으로 numary 배열에서 map 메소드를 사용한다.

map 메소드도 콜백 함수에서의 매개변수는 순서대로 배열의 요소, 배열의 인덱스, 배열 이다.

numary2 = numary.map(function(value, index, array){
	return value * value;
});

 

마찬가지로, 콜백 함수의 매개변수에서 배열의 인덱스와 배열은 생략해도 된다.

numary2 = numary.map(function(value){
	return value * value;
});

 

map 메소드에 대한 반환 값이 배열 형식이다.

map 메소드는 각 요소에 대하여 콜백 함수를 실행하고 변경된 요소들을 하나의 배열로 합쳐서 반환하게 된다.

console.log(numary2); // [ 10000, 40000, 90000, 160000, 250000 ]