配列操作に便利な高階関数

配列操作で使える高階関数について、今回は投稿します。
高階関数とは、引数や戻り値に関数を扱う関数の事です。

##forEach

まずは普通のループ文から。

for.js

const list = ["モンスター", "レッドブル", "水"];
for (let i = 0; i < list.length; i++) {
  console.log(list[i]); 
}
// -> モンスター、レッドブル、水

代表的なループの書き方だと思います。
これをforEachという高階関数で書いてみましょう。

forEach.js

const list = ["モンスター", "レッドブル", "水"];
list.forEach(function (elm) {
  console.log(elm);
});
 // -> モンスター、レッドブル、水

なんかスッキリしましたね。
forEachがやってる事は、引数の関数に配列の要素を一つずつ渡す。
ただそれだけですね！

##map
まずは普通にループ文使います。

for.js

const list = [1, 2, 3];
const newList = [];
for (let i = 0; i < list.length; i++) {
  newList.push(list[i] * 2);
}
// newList -> 2,4,6

listの要素を一つずつ２倍にして新しいリストを作成しているプログラムです。
これをmapという高階関数を使用して書いてみます。

map.js

const list = [1, 2, 3];
const newList = list.map(function (elm) {
  return elm * 2;
});
// newList -> 2,4,6

かなり読みやすいですよね。
mapは要素を一つずつ引数の関数に渡し、関数内で加工された値を戻り値として返しているだけです。

##filter
通常のfor文

for.js

const list = [1, 2, 3];
const newList = [];
for (let i = 0; i < list.length; i++) {
  if (list[i] > 1) {
    newList.push(list[i]);
  }
}
// newList -> 2,3

特定の条件に合う要素のみを新しい配列へ格納しているプログラムです。
これはfilterという高階関数でもっと読みやすく記述できます。

filter.js

const list = [1, 2, 3];
const newList = list.filter(function (elm) {
  return elm > 1;
});
// newList -> 2,3

ネストもなくなりとてもスッキリします。
filterは、戻り値がboolean型の関数を引数に取り、trueだった場合にその要素を戻り値として返します。

他にもsortやreduceなどがあります。

ちなみに、これらの高階関数は繋げて書くことも出来ます。
例えば、配列から条件に合うものを加工して出力したい場合

test.js

const list = [1, 2, 3];
list.filter(function (elm) { 
  return elm > 1; // 絞って
}).map(function (elm) { 
  return elm * 2; // 加工して
}).forEach(function (elm) { 
  console.log(elm); // 出力します
});
// newList -> 4,6

なんかイマイチなので、
ちょっとこれをアロー関数という奴で書いてみます。処理内容は上記と変わりません。

test.js

const list = [1, 2, 3];
list.filter(elm => elm > 1).map(elm => elm * 2).forEach(elm => console.log(elm));
// newList -> 4,6

まるで工場の流れ作業のような書き方が出来ます。
アロー関数についてはまた別途投稿しようと思います。

##最後に
処理によってはかなり可読性が上がる書き方だと思いますが、関数を呼ぶ回数を考えると速度に関しては通常のfor文が早そうです。
とは言っても楽に書けるand読みやすいので積極的に使って良いのではないでしょうか。