【JavaScript】forEach・map・filter・findの違いを理解する

こんにちは。サイオステクノロジーの川田です。

ループ処理ではなんとなーく使っていた「forEach」「map」「filter」「find」ですが
違いを理解できていなかったので今回は実際に動かしながら確認したいと思います。

ループ処理

「forEach」「map」「filter」「find」のメソッドはループ処理で使われます。
ループ処理と言ったら、、、、
for文やwhile文を思い浮かべる方もいるかと思います。
選択肢がたくさんありますよね！

様々な用途によって使い分けることにより処理がスッキリするかもしれません！
例えば！！

ぜひなにかの参考にしていただけたら嬉しいです。

forEach

forEachは配列の要素を一つずつ処理し、実行します。
戻り値はありません。

実装

const fruits = [ 'りんご', 'バナナ', 'いちご', 'みかん' ];
 
fruits.forEach(function( value ) {
     console.log( value );
});

結果

りんご
バナナ
いちご
みかん

配列の要素を一つずつ出力しています。

forEachを使用する際に注意点があります。
ループでは処理を途中で中断「break」やスキップ「continue」がありますが、forEachには使えませんのでご注意を＞＜
そのような場合はfor文やfor-of文を使うのが良いと思います。

戻り値なし

先ほども言いましたが戻り値はないです。

const arr = [1, 2, 3, 4, 5];

const result = arr.forEach(value => {
  return value * 2;
});
console.log(result);

戻り値を指定しても「undefined」が返ってきます。

map

mapは指定した条件の結果を戻り値として返します。
新たな配列を生成します。

それでは実装してみましょう。

実装

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = arr.map(value => {
  return value * 2;
});
console.log(result);

先ほどのforEachでは戻り値がありませんでしたが、mapは結果を戻り値として返します。
条件の×2した値が配列になって返されます。

[
   2,  4,  6,  8, 10,
  12, 14, 16, 18, 20
]

forEachの違いは分かりましたか？
大きく異なる点は、戻り値「return」を持つかどうかです。

「==」にするとどうなるか

先ほどは掛け算でしたが、これを「==」にすると何が返ってくるのか見てみましょう。

const array = [10, 20, 30, 40, 50];

let result = array.map(function(num){
  return num == 10;
});
console.log(result);

例はnumが10と等しいかどうかの結果をreturnしています。
実行結果は以下の通りです。

[ true, false, false, false, false ]

trueかflaseで返ってきているのがわかりますね。
結果からもわかる通り、一致した値を配列では返ってきません。

一致した値を取得してさらに処理をしたいなどの場合もありますよね。
そのような場合はfilterを使います。

filter

条件に一致した要素を抽出し、新しい配列を生成します。
mapになるとどのように違うのか、実装と結果を見てみましょう。

実装

const array = [2, 10, 20, 33, 45, 50];

const result = array.filter(function(num){
  return num % 2 == 0;
});
console.log(result);

結果は以下の通りです。
2で割って余りが0の値を抽出し配列を返しています。

[ 2, 10, 20, 50 ]

違いわかりましたでしょうか？
先ほどのmapと同じ条件にしてみます。

mapとの違い

const array = [10, 20, 30, 40, 50];

const result = array.filter(function(num){
  return num == 20;
});
console.log(result);

実行結果はもうわかりますよね。20の配列が返ってきます。
もしtrueの場合はこの処理、flaseの場合はこの処理と分けるのであればmapになりますね！

[ 20 ]

20が複数あった場合も20が続けて配列に格納されます。
例えばこのような感じです。

const array = [10, 20, 30, 40, 50, 20];

const result = array.filter(function(num){
  return num == 20;
});
console.log(result);

[ 20, 20 ]

一致した値の最初の要素だけを返すこともできます。
その場合はfindを使います。

find

条件に一致した最初の要素を返します。
では動作を見てみましょう！

実装

ageが20と一致するの最初の値を取得します。

const human = [
    {name: '花子', age: 10},
    {name: '太郎', age: 16},
    {name: '蓮', age: 16},
    {name: '柚', age: 20},
    {name: '蒼', age: 20}
];

const result = human.find( x => x.age == 20 );
console.log(result);

結果は以下の通りです。
age=20は2件ありますが、最初の1件のみ抽出されます！

{ name: '柚', age: 20 }

まとめ

いかがでしたでしょうか？
なんとなく調べて使っていたので、今回まとめてみて違いがよく分かりました^^

何かの参考になれたら嬉しいです。
ありがとうございました^^

About kawada 25 Articles

Webアプリケーション開発を行っており、プログラミング初心者向けの記事や動画編集に関する内容を中心とした記事を執筆しています。

Twitter YouTube