引数が参照渡しの関数は注意(?)

記事の概要

先日、引数が参照(参照渡し)になっている関数はバグを生み出しやすいため注意が必要という話を聞いたので、備忘のために本記事を作成しました。

サンプルコードと解説

以下に、ポケモンのレベルをMaxまで上げる関数を書き、レベルアップ前後のポケモンの状態を出力する処理を書いています。

注意したいパターン（処理1）

boostUpLevelFunction1はbeforePokémon1の参照を受け取り、参照先のオブジェクトを直接更新する処理となっているため、'beforePokémon1'もレベルアップしてしまっています。

type pokémon = { name: string; level: number };
// 参照先を直接更新する関数
const boostUpLevelFunction1 = (pokémon: pokémon): pokémon => {
  pokémon.level = 99;
  return pokémon;
};
const beforePokémon1: pokémon = { name: "ヒトカゲ", level: 8 };
const afterPokémon1: pokémon = boostUpLevelFunction1(beforePokémon1);

console.log(beforePokémon1); // { name: 'ヒトカゲ', level: 99 }
console.log(afterPokémon1); // { name: 'ヒトカゲ', level: 99 }

改善後のパターン（処理2）

一方でboostUpLevelFunction2は参照を受け取った後に、参照先のオブジェクトをDeepCopyして変数newPokémonにその参照を保存し、DeepCopyしたオブジェクトを更新する処理となっているため、'beforePokémon1'はレベルアップしていません。

type pokémon = { name: string; level: number };
// 参照先を直接更新しない関数
const boostUpLevelFunction2 = (pokémon: pokémon): pokémon => {
  const newPokémon: pokémon = structuredClone(pokémon);
  newPokémon.level = 99;
  return newPokémon;
};

const beforePokémon2: pokémon = { name: "ゼニガメ", level: 8 };
const afterPokémon2: pokémon = boostUpLevelFunction2(beforePokémon2);

console.log(beforePokémon2); // { name: 'ゼニガメ', level: 8 }
console.log(afterPokémon2); // { name: 'ゼニガメ', level: 99 }

まとめ

複雑な処理や利用箇所とは離れた部分で定義されている関数で上記の注意したいパターンのような関数になっていると、新たな処理を追加する際などに元のオブジェクトに影響を与えていると気づけず、想定外の動き(バグ)を生み出しやすくなってしまうとのことです。
ですので、用途によるかもしれませんが可能な場合は特定の処理を関数化する際は引数自体に影響を与えないような形にするのが良さそうです。
もしおかしな点に気づいた方や、もっと良い例など教えていただけるようでしたらコメント等いただけると嬉しいです。
（例が悪い気がするので後で書き直すかも知れないです）

ここまでお読みいただきありがとうございました。