【JavaScript入門】ObjectをCopy・Mergeする方法 | Object.assign()・スプレッド構文

// < Object.assign()を使用したCopy >

const obj = { a: 1, b: 2 };

// 1. 「値渡し-Copy」(Pass by value)
const copyObj = Object.assign({}, obj);

// 2. copyObjを更新する
copyObj.a = 12;

console.log({obj});
// obj: {a: 1, b: 2}

console.log({copyObj});
// copyObj: {a: 12, b: 2}

// < spread構文を使用したCopy >
const robotama = {id:1,pirotName:'群馬のまー', name: 'ロボ玉'};

// 1. spread構文で一度展開してから再度、{}で包むとCopyできる。
const copyRobotama = {...robotama};

// 2. CopyしたObjectに新しいkey&valueを追加する。
copyRobotama.from = 'グンマー帝国';

console.log({robotama});
// robotama: {id: 1, pirotName: '群馬のまー', name: 'ロボ玉'}

// 3. Copyだけ変更 => Spread構文のCopyは「値渡し」(Pass by value)で、非破壊的！
console.log({copyRobotama});
// copyRobotama: {id: 1, pirotName: '群馬のまー', name: 'ロボ玉', from: 'グンマー帝国'}

// < Object.assign()を使用したMerge Ver.既存のObjectを加工する >

const momo = {id:1,pirotName:'ももちゃん', from: '千葉'};

const hakutou = {id:2,pirotName: '白桃',name:'ロボ玉試作3号機', special: '白桃ビーム'};

const momoAndHakutou = Object.assign(momo, hakutou);

// 1. 第一引数に指定したObjectは、直接加工される！
console.log({momo});
// momo: {id: 2, pirotName: '白桃', from: '千葉', name: 'ロボ玉試作3号機', special: '白桃ビーム'}

console.log({hakutou});
// hakutou: {id: 2, pirotName: '白桃', name: 'ロボ玉試作3号機', special: '白桃ビーム'}

// 2. Object.assign()を使用したMerge-Result
console.log({momoAndHakutou}) 
// momoAndHakutou: {id: 2, pirotName: '白桃', from: '千葉', name: 'ロボ玉試作3号機', special: '白桃ビーム'}

// < Object.assign()を使用したMerge Ver.元のObjectを破壊しない >

const tokyo = {id:1, pirotName:'東京のまー', favoriteMovie: '翔んで埼玉', from: 'グンマー帝国'};

const gunma = {id:2, pirotName: 'ロボ玉', name:'ロボ玉試作2号機'};

// 1. 第一引数がAssign(割り当て)のtargetなので、{}(空のObject)を渡すと、そこに第二引数以降のObjectをAssignしてくれる。
const mergeJapanCapital = Object.assign({}, tokyo, gunma);

console.log({tokyo});
// tokyo: {id: 1, pirotName: '東京のまー', favoriteMovie: '翔んで埼玉', from: 'グンマー帝国'}

console.log({gunma});
// gunma: {id: 2, pirotName: 'ロボ玉', name: 'ロボ玉試作2号機'}

// 2. 元のObjectたちは、破壊されず新しいMerge-Objectの完成！
console.log({mergeJapanCapital});
// mergeJapanCapital: {id: 2, pirotName: 'ロボ玉', favoriteMovie: '翔んで埼玉', from: 'グンマー帝国', name: 'ロボ玉試作2号機'}

// 3. Spread-構文の方がシンプルに記述できるので、おすすめ！
const spreadMerge = { ...tokyo, ...gunma };

console.log({spreadMerge});
// spreadMerge: {id: 2, pirotName: 'ロボ玉', favoriteMovie: '翔んで埼玉', from: 'グンマー帝国', name: 'ロボ玉試作2号機'}

// < spread構文を使用したMerge >

const object1 = {id:1,pirotName:'群馬のまー'};

const ID = 12;

// 1. id に ID を紐付けてMerge => id は既にある値なので、後から入って来た値でupdateされる！
console.log({ ...object1, id:ID});
// {id: 12, pirotName: "群馬のまー"}

const roboBall = {id:1,pirotName:'群馬のまー', name: 'ロボ・ボール'};

const prototypeRobo = {id:2,pirotName:'東京のまー', name:'ロボ玉試作1号機', special: 'ロボ玉ビーム'};

// 2. ObjectとObjectのMerge
const mergedRobo = { ...roboBall, ...prototypeRobo };

// 3. 重複しているkeyのvalueは、後から合成(Merge)する方でupdateされる！
console.log(mergedRobo);
// {id: 2, pirotName: '東京のまー', name: 'ロボ玉試作1号機', special: 'ロボ玉ビーム'}