【TS】findメソッドとfilterメソッドの使い方をざっくりまとめてみた

目次

背景

仕事でfindメソッドとfilterメソッドをよく使うので、忘れないように記事にしようと思います。

findメソッド

findメソッドは、 指定したテスト関数を満たす最初の配列要素を返します。テスト関数を満たす値がない場合は、undefined が返されます。 また、レシーバが空の配列の場合、満たす値が存在しないので、undefinedが返されます。

const users = [
  {
    firstName: "yuki",
    age: "25",
    country: "japan",
  },
  {
    firstName: "ken",
    age: "27",
    country: "usa",
  },
];

const usaUser = users.find(({ country }) => country === "usa");
console.log(usaUser);
// => {
//      "firstName": "yuki",
//      "age": "25",
//      "country": "usa"
//    } 

↓ undefinedを返す場合

const spainUser = users.find(({country}) => country === "spain");
console.log(spainUser); // => undefined

filterメソッド

findメソッドは、 指定したテスト関数を満たす全ての配列要素を一つの配列として返します。テスト関数を満たす値がない場合、空の配列が返されます。 また、レシーバが空の配列の場合、満たす値が存在しないので、空の配列が返されます。

const users = [
  {
    firstName: "yuki",
    age: "25",
    country: "japan",
  },
  {
    firstName: "ken",
    age: "27",
    country: "usa",
  },
  {
    firstName: "yuki",
    age: "25",
    country: "spain",
  },
];

const newUsers = users.filter(({ age }) => age === "25");
console.log(newUsers); 
// => [
//      {
//        "firstName": "yuki",
//        "age": "25",
//        "country": "japan"
//      }, 
//      {
//        "firstName": "yuki",
//        "age": "25",
//        "country": "spain"
//      }
//    ]

↓ 空の配列を返す場合

const newUsers = users.filter(({ age }) => age === "28");
console.log(newUsers); // => []

参考記事

Array.prototype.find() - JavaScript | MDN

Array.prototype.filter() - JavaScript | MDN