ts

// 元の配列を破壊してしまう例
const myFunction = (array: { age: number; name: string }[]): number[] => {
  return array
    .filter((item) => item.age > 18) // ✅ 非破壊：元の配列を変更せず、新しい配列を返す
    .map((item) => item.age)         // ✅ 非破壊：こちらも新しい配列を返す
    .sort((a, b) => a - b);          // ⚠️ 破壊的メソッド：元の配列を並べ替えてしまう
};

// 🚨 解説：なぜ危険なの？
// ・.filter() と .map() は「新しい配列を返す」＝非破壊的メソッド。
// ・しかし .sort() は「元の配列そのものを並べ替える」＝破壊的メソッド。
// ・つまり、filter/mapで安全に処理しても、最後のsortで元のデータが壊れる！
// ・複数箇所で同じ配列を共有している場合、意図せず他の処理に影響を与えるリスクがある。
// ・特にReactや関数型プログラミングの文脈では「不変性（immutability）」が重要なので注意。

// 元の配列を破壊しない例
const myFunction = (array: { age: number; name: string }[]): number[] => {
  return array
    .filter((item) => item.age > 18) // ✅ 非破壊
    .map((item) => item.age)         // ✅ 非破壊
    .toSorted((a, b) => a - b);      // ✅ 非破壊
};

// 💡 .toSorted() のポイント
// ・.sort() と同じように並べ替えができるが、元の配列は変更されない。
// ・つまり、「filter → map → toSorted」で完全に非破壊なパイプライン処理が可能。
// ・ES2023 で追加された「非破壊的メソッド」シリーズ（toSorted, toReversed, toSplicedなど）の一つ。
// ・既存のデータを保ったまま安全に並べ替えたいときに最適。