はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、JavaScriptのアロー関数についてご説明しました。

【JavaScript】var / let / constのベストな使い方

今回は、JavaScriptにあらかじめ用意されている、配列の反復処理メソッドをご紹介します。

「破壊的」メソッドについて

反復処理メソッドの紹介の前に、メソッドが「破壊的」か「非破壊的」かの違いをご説明します。

下のコードは、破壊的なメソッドの例です。

const arr = [0, 1, 2];
console.log(arr);  // --> [0, 1, 2]
// 配列の末尾に「3」を追加
arr.push(3);
console.log(arr);  // --> [0, 1, 2, 3]

push()メソッドを用いて、arrの中身を途中で書きかえています。2行目と4行目のconsole.log()の結果が異なることから確認できるかと思います。

このように、メソッド適用の前後で対象の差分が発生するものを「破壊的である」といいます。

破壊的メソッドには、破壊する前の値をそのまま使いまわせない(別の変数にコピーしておく必要がある)というデメリットがあります。

ちなみに、push()メソッドの結果を変数に代入していないのは、push()メソッドの戻り値が「push()後の配列の要素数」だからです。(push()後の配列そのものをreturnしてくれればいいんだけど。。。)

これからご紹介するメソッドは、そのデメリットのない「非破壊的」なメソッドです。

ちなみに、「非破壊がない」ということを、「副作用がない」と表現する場合もあります。

「非破壊的」メソッド

Array.prototype.map()

map()メソッドは、引数に入れられた関数を配列の各要素に適用して、その結果から新しい配列を生成するメソッドです。

文字だけだとわかりにくいので、コードを見てみましょう。

const arr = [0, 1, 2];
console.log(arr);  // --> [0, 1, 2]
// 配列の各要素を2倍して、新しい配列を生成する
const arrDouble = arr.map(function(n) {
  return n * 2
});
console.log(arrDouble);  // --> [0, 2, 4]
console.log(arr);  // --> [0, 1, 2]

arrDoubleにはarrの中身を2倍した数字が入っている一方、arrそのものには変化がありません。

もともとの要素を壊すことなく、新しい要素を作るのが、「非破壊」なメソッドなのです。

ところで、上のコードでのmap()メソッドの引数は、「引数nをとって、それを2倍した数字を返す関数」です。

この箇所は、アロー関数を使って書き換えることができます。

const arrDouble = arr.map(n => n * 2);

引数に関数をいれる、ということが少し不自然に思った方。グッドキャッチです！

前回の記事でお話ししたように、JavaScriptの関数は変数に代入できます。

それだけでなく、関数の引数に関数をいれる、なんてこともできるのです。

こうした特長は関数型プログラミングに多いです。JavaScriptの関数型プログラミングに関しては、今後の記事でじっくり触れていきたいと思います。

Array.prototype.filter()

filter()メソッドは、配列の要素の中から与えられた条件にマッチするものを抽出し、新しい配列を返します。

const arr = [0, 1, 2, 3, 4, 5];
// 3以上の要素を抽出する
const arrFilter = arr.filter(n => n >= 3);
console.log(arrFilter);  // --> [3, 4, 5]

Array.prototype.includes()

includes()メソッドは、配列に特定の要素が含まれているかを、booleanで返します。

const arr = [0, 1, 2, 3, 4, 5];
// 「4」が含まれているかをチェックする
console.log(arr.includes(4););  // --> true
// 「6」が含まれているかをチェックする
console.log(arr.includes(6););  // --> false

Array.prototype.reduce()

reduce()メソッドは、引数で与えられた関数を配列の要素に実行し、単一の値で返します(畳みこみ)。

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
/**
 * acc: 累積値
 * cur: 現在値
 * 最初の計算では0 + 1 = 1が行われ、(acc, cur) = (0, 1)が、
 * 次の計算では1 + 2 = 3が行われ、(acc, cur) = (1, 2)が適用される。
 * 下の計算では、arrの中身を最初から最後まで加算し、その結果を返す。
 */
const arrReduce = arr.reduce((acc, cur) => arr + cur);
console.log(arrReduce);  // --> 45

まとめ

今回は、配列のビルトインメソッドについて、いくつかご紹介しました。

これらの関数を使うと、今まで繰り返し構文(for文など)や条件構文(if文)などで書いていたところを、スッキリさせることができます。

また、非破壊なメソッドのため、元の要素の変化を気にせず使えるのも大きいですね。

紹介しきれなかったメソッドもあるため、気になった方はMDNなどで探してみるのもよいかと思います。

最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪