Array.prototype.findで配列の中から条件に合う要素を取得する 💻

developer.mozilla.org

配列の中から条件に合う要素を取得する場合、いつも配列をループで回すか、lodashが導入されているプロジェクトでは_.findを使っていたのですが、IE11が亡きいま、Array.prototype.findでいけるということに気がつきました。

lodash.com

ざっと、調べてみた所、Array.prototype.findは、モダンブラウザには2015年ごろから実装されているようです。が。IE11で未実装だったため、長らくポリフィルが必要という認識でした。

2022年にIE11のサポートが終了したタイミングで、ポリフィルなしで使っても問題なしになったと考えて良いでしょう。僕は気づくまでに1年半かかりました。他にもIE11に足を引っ張られていたメソッドが多々ありそうです。

blogs.windows.com

ソースコード

const array = [{
  name: 'taro',
  age: 20
}, {
  name: 'jiro',
  age: 20
}, {
  name: 'sabro',
  age: 18
}];

array.find(({ name }) => name === 'taro'); // { name: 'taro', age: 20 }
array.find(({ age }) => 20 <= age); // { name: 'taro', age: 20 } ※ 初めに条件にヒットした要素を返す
array.find(({ age }) => name === 'shiro'); // undefined ※ 条件にヒットしない場合はundefineを返す

DEMO

ちなみに、Array.prototype.findを使っても問題ないと気づいたきっかけは、GitHub Copilotによるサジェストでした。
ひとりでコーディングしていると、こういったことになかなか気づかなかったりするので、ありがたい存在です。GitHub Copilot。