2021年11月20日 JavaScript (JS Primer) reduceメソッド

reduceメソッド

前回のコールバック関数の結果を元に、コールバック関数を実行するメソッドです。reduceの最終的な返り値は、配列以外の任意の値になります。

const array = [1, 2, 3];
// すべての要素を加算した値を返す
// accumulatorの初期値は`0`
const totalValue = array.reduce((accumulator, currentValue, index, array) => {
    return accumulator + currentValue;
}, 0);
// 0 + 1 + 2 + 3という式の結果が返り値になる
console.log(totalValue); // => 6

Array.fromメソッド

Array.from() メソッドは、配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい Array インスタンスを生成します。

第一引数では配列に変換したい配列風のオブジェクトなどを渡します。第二引数では第一引数のそれぞれの要素に対して行いたい処理などが含まれたコールバック関数などを指定することができます。

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

メソッドチェーンと高階関数

メソッドチェーンとは名前のとおり、メソッドを呼び出した返り値に対してメソッド呼び出しをするパターンのことを言います。

以下コードでは、Array#concatメソッドの返り値に対してさらにconcatメソッドを呼び出すというメソッドチェーンが行われています。

const array = ["a"].concat("b").concat("c");
console.log(array); // => ["a", "b", "c"]

メソッドチェーンを利用しない場合、以下のようになります。

const abArray = ["a"].concat("b");
console.log(abArray); // => ["a", "b"]
const abcArray = abArray.concat("c");
console.log(abcArray); // => ["a", "b", "c"]

最終的な処理結果は同じですが、メソッドチェーンを利用することで途中の一時的な変数を省略することが出来ます。