[JavaScript]Object.assignを基礎から理解する

はじめに

今回は、JavaScriptのObject.assignメソッドについて学んだことをまとめておきたいと思います。

1. Object.assignメソッドとは

Object.assign()は、第一引数に指定したコピー先のオブジェクトに、第二引数以降の全てのオブジェクトのプロパティをマージしてくれるメソッドです。

基本構文

const mergeObject = Object.assign(target, ...sources);

sourcesには複数のオブジェクトを指定することができます。

サンプルコード

オブジェクトをマージする

const animals1 = { dog: 'いぬ', cat: 'ねこ'}
const animals2 = { tiger: 'とら', rabbit: 'うさぎ'}

const mergeAnimals = Object.assign(animals1, animals2);

console.log(mergeAnimals)
//{ dog: 'いぬ', cat: 'ねこ', tiger: 'とら', rabbit: 'うさぎ'}

オブジェクトをマージする(同じプロパティを持つ場合)

引数に指定したオブジェクトが同じプロパティを持つ場合、後に指定したオブジェクトの値で上書きされます。

const animals1 = { dog: 'いぬ', cat: 'ねこ'}
const animals2 = { cat: '猫', rabbit: 'うさぎ'}

const mergeAnimals = Object.assign(animals1, animals2);

console.log(mergeAnimals)
//{ dog: 'いぬ', cat: '猫', rabbit: 'うさぎ'}

オブジェクトをコピーする

空のオブジェクトとコピーしたいオブジェクトをマージすることで、実現できます。

const animals1 = { dog: 'いぬ', cat: 'ねこ'}
const animals2 = Object.assign({}, animals1);

console.log(animals2)
//{ dog: 'いぬ', cat: 'ねこ'}

引数のプロパティにオブジェクトがネストされている場合

Object.assignはShallow Copyなので、ネストされている場合、そのオブジェクトは参照がコピーされてしまいます。

const animals1 = { dog: 'いぬ', cat: 'ねこ', birds: { duck: 'あひる'}}
const animals2 = Object.assign({}, animals1);

animals2.birds.duck = '家鴨';

console.log(animals1)
//{ dog: 'いぬ', cat: 'ねこ', birds: { duck: '家鴨'}　}
console.log(animals2)
//{ dog: 'いぬ', cat: 'ねこ', birds: { duck: '家鴨'}　}

このような場合は、オブジェクトをJSON文字列に一度変換した後に、オブジェクトに戻すことで解決できます。

const animals1 = { dog: 'いぬ', cat: 'ねこ', birds: { duck: 'あひる'}}
const animals2 = Object.assign({}, JSON.parse(JSON.stringify(animals1)));

animals2.birds.duck = '家鴨';

console.log(animals1)
//{ dog: 'いぬ', cat: 'ねこ', birds: { duck: 'あひる'}　}
console.log(animals2)
//{ dog: 'いぬ', cat: 'ねこ', birds: { duck: '家鴨'}　}

3. 終わりに

Object.assignの基本的な使い方を理解することができました。
また、Object.assignを使わずにスプレッド構文で書くこともできるそうなので、調べてみたいと思います。

4. 参考文献