[TypeScript] 配列の条件に一致する最初の要素を取得するfind関数

🌱 はじめに

この記事では、TypeScript の find をまとめています。
findは JavaScript の配列メソッド（Array.prototype.find）で、TypeScript でもそのまま使えます。

🌱 結論

配列から指定された条件に一致する最初の要素を返すメソッド

※条件に一致する要素が存在しない場合はundefinedを返します。
ただし、find(...)の後ろに**?? 任意の値**を書くと、undefinedの代わりに任意の値を返すことができます。

const hoge = list.find((各要素) => 条件式);

メリット

1. for ループなどを使用する場合よりも、シンプルなコードを書くことができます。
2. 要素が見つからなかった場合はundefinedを返すため、見つからなかった場合の処理を書きやすくなります。
3. 条件に一致する要素が見つかった時点で検索を終えるため、残りの要素は判定しません。

🌱 1. 条件を満たす

// 数字の配列
const numbers = [1, 2, 3, 4, 5];
// 2より大きい値を取得する(最初にヒットした値を取得する)
const result = numbers.find((i) => i > 2);

// 期待値： 3
console.log(result);

実行結果を確認する

3

🌱 2. 条件を満たさない

// 数字の配列
const numbers = [1, 2, 3, 4, 5];
// 10より大きい値を取得する
const result = numbers.find((i) => i > 10);

// 期待値： undefined
console.log(result);

実行結果を確認する

undefined

🌱 3. 条件を満たさない場合に undefined 以外の値を返す

// 数字の配列
const numbers = [1, 2, 3, 4, 5];
// 10より大きい値を取得する
const result = numbers.find((i) => i > 10) ?? false;

// 期待値： false
console.log(result);

※この場合、resultの型はnumber | falseになります。
※配列にundefinedやnullが含まれる場合は、「見つからなかった」のか「その要素が見つかった」のかを区別できません。その場合はfindIndexやsomeを使います。

実行結果を確認する

false