콜백함수와 반복문 (map, filter, reduce)

1. 콜백함수란?

콜백함수(callback function)는 다른 코드의 인자로 넘겨주는 함수입니다.

콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행될 것입니다.

이처럼 콜백 함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다.

다음의 예제를 통해 구체적으로 살펴봅시다.

function mul(num1, num2, callback){
    //외부에서 callback으로 함수를 전달했다면
    if(callback){
        //매개변수로 결과를 전달해준다.
        callback(num1 * num2);
    }
}
// 값으로 받을 함수
function print(result){
    console.log(result);
}
// 함수 print를 값으로 사용
mul(3, 9, print);

mul 함수의 내부를 보면 callback함수를 전달받아 callback(num1 * num2)을 실행시킵니다.

위의 예제를 통해 알 수 있듯이 mul이라는 함수에 print 함수를 인자로 넘겨줌으로써 mul 함수가 print함수를 제어할 수 있게 되었습니다.

즉, 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가집니다.

2. Array.prototype.map()

const arr1 = [10, 20, 30];
const callback = (currentValue, index) => {
	console.log(currentValue, index);
	return currentValue + 5;
}
const mapArr = arr1.map(callback);
console.log(mapArr);

// -- 실행 결과 -- 
// 10 0
// 20 1
// 30 2 
// [15, 25, 35]

앞서 말했듯이 콜백 함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다.

이것을 map메서드에 활용해 말해보면 map메서드의 인자로 callback 함수를 넘겨줌으로써 map메서드는 callback함수를 제어할 수 있게 되었습니다.

어떻게 제어할까요? map메서드는 다음과 같은 구조로 이뤄져 있습니다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

map 메서드는 첫 번째 인자로 callback함수를 받고, 생략 가능한 두 번째 인자로 콜백 함수 내부에서 this로 인식할 대상을 특정할 수 있습니다.

map 메서드는 메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 꺼내어 콜백 함수를 반복 호출하고, 콜백 함수의 샐행 결과들을 모아 새로운 배열을 만듭니다. 콜백 함수의 첫 번째 인자에는 배열의 요소 중 현재값이, 두 번째 인자에느 현재값의 인덱스가, 세 번째 인자에는 map 메서드의 대상이 되는 배열 자체가 담깁니다.

위의 예제 코드를 다시 살펴 봅시다.

배열 [10, 20, 30]의 각 요소를 처음부터 하나씩 꺼내어 콜백 함수를 실행합니다.

우선 첫 번째(인덱스 0)에 대한 콜백 함수는 currentValue에 10이, index에는 인덱스 0이 담긴 채 실행됩니다.

여기서 중요한 점은 return입니다. return으로 반환해 준 값이 새로운 배열의 값으로 들어갑니다.

즉 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

다음과 같이 익명 함수를 사용하여 표현할 수도 있습니다.

const arr1 = [10, 20, 30];
const mapArr = arr1.map((currentValue, index) => {
	console.log(currentValue, index);
	return currentValue + 5;
});
console.log(mapArr);

// -- 실행 결과 -- 
// 10 0
// 20 1
// 30 2 
// [15, 25, 35]

2. Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

filter메서드는 다음과 같은 구조로 이뤄져 있습니다.

arr.filter(callback(currentValue[, index[, array]])[, thisArg])

filter 메서드는 첫 번째 인자로 callback함수를 받고, 생략 가능한 두 번째 인자로 콜백 함수 내부에서 this로 인식할 대상을 특정할 수 있습니다.

filter메서드 역시 메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 꺼내어 콜백 함수를 반복 호출하고, 콜백 함수의 샐행 결과들을 모아 새로운 배열을 만듭니다. 콜백 함수의 첫 번째 인자에는 배열의 요소 중 현재값이, 두 번째 인자에느 현재값의 인덱스가, 세 번째 인자에는 filter 메서드의 대상이 되는 배열 자체가 담깁니다.

const arr1 = [10, 20, 30];
const filterArr = arr1.filter((currentValue, index) => {
	console.log(currentValue, index);
	return currentValue > 10;
});
console.log(filterArr);

// -- 실행 결과 -- 
// 10 0
// 20 1
// 30 2 
// [20, 30]

map메서드와 차이점

map메서드와 다른점은 map메서드는 callback함수가 반환하는 값이 새로운 배열의 값이 되었지만

filter메서드는 callback함수의 반환값이 true이면 해당 값을 유지하고 false를 반환하면 해당 값을 버립니다.

진짜인지 볼까요?? 다음 예제를 살펴봅시다.

false를 return하는 경우

const arr1 = [10, 20, 30];
const filterArr = arr1.filter((currentValue, index) => {
	console.log(currentValue, index);
	return false;
});
console.log(filterArr);
// -- 실행 결과 -- 
// 10 0
// 20 1
// 30 2 
// []

true를 return하는 경우

const arr1 = [10, 20, 30];
const filterArr = arr1.filter((currentValue, index) => {
	console.log(currentValue, index);
	return true;
});
console.log(filterArr);
// -- 실행 결과 -- 
// 10 0
// 20 1
// 30 2 
// [10, 20, 30]

callback함수에 true를 반환해 줬더니 배열이 그대로 유지되고 false를 반환해 줬더니 빈 배열이 되었습니다.

2. Array.prototype.reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

reduce메서드는 다음과 같은 구조로 이뤄져 있습니다.

arr.reduce(callback[, initialValue])

callback

• accumulator: callback함수가 return한 값을 누적합니다.
• currentValue: 처리할 현재 요소
• currentIndex (Optional): 처리할 현재 요소의 인덱스
• array (Optional): reduce()를 호출한 배열

initialValue

callback의 최초 호출에서 첫 번째 인수에 제공하는 값.

초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.

const sum = [10,20,30].reduce((acc,value) => {
	console.log(acc, value);
	return acc + value;
},0)
console.log("sum = ", sum);
// -- 실행 결과 -- 
// 0 10
// 10 20
// 30 30 
// sum = 60

reduce메서드로 filter메서드 구현해보기

filter

const arr = [10, 20, 30];
const filterArr = arr.filter((currentValue, index) => currentValue > 10
console.log(filterArr); // [20, 30]

reduce

const arr = [10, 20, 30];
const reduceArr = arr.reduce((acc, value) => {
	if(value > 10) {
		acc.push(value);
	}
	console.log(acc,value);
	return acc;
},[])
console.log(`reduceArr = ${reduceArr}`);
// -- 실행 결과 -- 
// [] 10
// [20] 20
// [20, 30] 30
// reduceArr = [20, 30]