コールバック関数と繰返し文(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関数の内部を表示すると、コールバック関数が渡され、コールバック(num 1*num 2)が実行されます.
上記の例に示すように、print関数をパラメータとしてmulという関数に渡すことで、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メソッドのパラメータとしてmapメソッドに渡すことができ、mapメソッドがコールバック関数を制御できるようにします.
どうやってコントロールしますか?mapメソッドは、次の構造から構成されます.

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

mapメソッドは、callback関数を第1のパラメータとして受信し、callback関数で省略可能な第2のパラメータとして識別されるターゲットを指定することができる.
mapメソッドは、メソッドターゲットとなる配列のすべての要素を最初から最後まで取り出し、コールバック関数を繰り返し呼び出し、コールバック関数の斜線結果を収集して新しい配列を作成します.コールバック関数の最初のパラメータには、配列内のすべての要素の現在値、2番目のパラメータの現在値のインデックス、および3番目のパラメータの配列自体が含まれ、mapメソッドのターゲットになります.
上記のサンプルコードをもう一度見てみましょう.
アレイ[10,20,30]の各要素を最初から取り出し、コールバック関数を実行します.
まず、最初の(インデックス0)のコールバック関数はcurrentValueで10、インデックスではインデックス0である.
ここで重要なのは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関数を第1のパラメータとして受信し、callback関数の内部で省略可能な第2のパラメータとして識別するターゲットを指定することができる.
filterメソッドは、メソッドターゲットとなる配列のすべての要素を最初から最後まで取り出し、コールバック関数を繰り返し呼び出し、コールバック関数の斜線結果を収集して新しい配列を作成します.コールバック関数の最初のパラメータには、配列内の要素の現在値、2番目のパラメータの現在値のインデックス、および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関数の戻り値がtrueの場合、filterメソッドは値を保持し、falseを返すと値を破棄します.
本当かどうか見てみましょう.次の例を示します.
falseを返すと

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を返すと

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]

コールバック関数はtrueを返し、配列は変わらずfalseを返し、配列は空になります.

2. Array.prototype.reduce()

reduce()  メソッドアレイ内の各要素について に与える 減速機 関数を実行し、結果値を返します.
reduceメソッドは、次の構造で構成されています.

arr.reduce(callback[, initialValue])

callback

accumulator:callback関数が返す値を積算します.

currentValue:処理する現在の要因

currentIndex(オプション):処理する現在の要素のインデックス

array(オプション):reduce()を呼び出す配列

initialValue

コールバックの最初の呼び出しで最初の引数に指定された値.
初期値が指定されていない場合は、配列の最初の要素が使用されます.

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]