【JavaScript】find()とfilter()の使い分けまとめ

#はじめに

配列の中から特定の要素を取り出す時、
ひとつ→find()
複数→filter()
を使うけど、返す値が異なることを覚えておきたい。

#ソースコード
配列の中から10以上の値を取り出す。
###findメソッド

const array = [5, 120, 10, 10, 4];

const result = array.find(element => element >= 10);

console.log(result);
//120

120という値だけが返される。

###filterメソッド

const array = [5, 120, 10, 10, 4];

const result = array.filter(element => element >= 10);

console.log(result);
//[120, 10, 10]

10以上の値だけが入った新しい配列が返される。
filterメソッドを使ってこの配列から120を取り出したい場合は、

result[0]

で値を取り出す。

#まとめ

find()は配列の要素の値を返して
filter()は関数内で条件が一致する値だけを格納した新しい配列を返す。