[Typescript] オブジェクトのクローン

初めに

NextJS + typescriptでwebアプリケーションを作成していた際、使用しているオブジェクトの内容が意図せず変更されてしまい、とても困惑してしまいました。その原因と解決策をここに残したいと思います。

意図していない変更の概要

下記のようにオブジェクトAを変数Bに代入して、その代入された変数Bに変更を加えた後に元々のオブジェクトAを確認すると、変数Bにした変更がオブジェクトAにも反映されてしまっていました。

const object_A = {
    id: 1,
    name: 'tanaka'
}

const B = object_A
B.name = 'takahashi'

console.log(object_A)
// {id: 1, name: 'takahashi'}

原因

これの原因としては、Typescript(Javascript)はオブジェクトを変数に代入すると参照渡しになるためでした。
変数BにはオブジェクトAの参照が渡されるため、オブジェクトAと変数Bが同じオブジェクトを参照する事になります。そのため、変数Bにした変更がオブジェクトAにも反映されてしまいます。

オブジェクトAに変更を反映してほしくない場合は、変数Bに代入するときに意図的に値渡しにする必要があります。

解決策

Typescirptでオブジェクトを値渡しにする方法はstructureClose()メソッドを使用する事です。
引数にオブジェクトを入れると値渡しでオブジェクトを複製できます。

const B = structureClose(object_A);

こうする事によって、変数BはオブジェクトAとは切り離されるので、変数Bに変更を加えてもオブジェクトAにはなんの影響も与えられません。

最後に

オブジェクトに意図せず変更が加えられていた場合は参照渡しされている事が原因な可能性がありますので、頭の片隅にでも置いといてもらえればと思います。
以上、閲覧して頂きありがとうございました