【JavaScript・初学者】map / forEach / filter / findの違い

はじめに

Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は、map / forEach / filter / findの違いについてまとめました

比較

メソッド	map	forEach
目的	配列の全ての要素を変換する	配列の全ての要素に対して何かを実行する
返り値	変換後の要素からなる新しい配列	なし（undefined）
元の配列への影響	元の配列は変更されない	元の配列は変更されない
使用例	配列の全ての要素を一定のルールで変換する場合など	配列の全ての要素に対して一定の操作を実行する場合など

メソッド	filter	find
目的	条件に合致する全ての要素を取得する	条件に合致する最初の要素を取得する
返り値	条件に合致する要素からなる新しい配列	条件に合致する最初の要素、なければundefined
元の配列への影響	元の配列は変更されない	元の配列は変更されない
使用例	特定の属性を持つオブジェクトを抽出する場合など	IDや一意のキーで特定のオブジェクトを検索する場合など

map / forEach / filter / find

書くメソッドの使い方について個別にまとめているので、参考にしてみてください。

map

forEach

filter

find