TypeScriptのスプレッド演算子で上書き

オブジェクトをDeep Copyしたい

似たようなオブジェクトを別に作りたいことありますよね？

typescript

const obj = {name: "Satoshi", age: 40, birthday: "1981-06-12"};

このオブジェクトと同じで、年齢を変えたいオブジェクトを使ってテストしたいとします。
その時は、スプレッド演算子でオブジェクトを作りましょう。

スプレッド演算子とは

配列やオブジェクトを展開するのがスプレッド演算子の役割です。

typescript

const obj = {name: "Satoshi", age: 40, birthday: "1981-06-12"};
console.log({obj});
console.log({...obj});

だと、

{ obj: { name: 'Satoshi', age: 40, birthday: '1981-06-12' } }
{ name: 'Satoshi', age: 40, birthday: '1981-06-12' }

と表示されます。
2番目のものはきちんと展開されます。

一部だけ書き換える

このオブジェクトの年齢だけ書き換えるコードは下記のようになります。

typescript

const copyObj = {
    ...obj,
    age: 30
};
console.log(copyObj);

これで、ageが30で上書きされたオブジェクトができます。

順番に注意

typescript

const notCopyObj = {
    age: 30,
    ...obj
};
console.log(notCopyObj);

これでは上書きされません。
まあ age: 30 を展開された値で上書きされてしまうので、当たり前ですね。
展開した後に値を上書きするので、前者で書くようにしましょう。
実際間違えていたコードを見たので書いておきます。

スプレッド演算子を活用しましょう!!