はじめに
こんにちは、かずん(@kazoonLab)です。
前回の記事では、JavaScriptのアロー関数についてご説明しました。
今回は、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などで探してみるのもよいかと思います。
最後までご覧いただきありがとうございます。
この記事がいいなっと思ったら読者登録をお願いいたします♪
【ツイッターでは主に、仕事や技術系の内容をつぶやいています】
技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)