JapaScript Object.assign()とSpread Propertiesの使い方

Object.assign() の使い方

Object.assign() は、
ターゲット先オブジェクトにソースオブジェクトを
移譲する形でコピーします。
下の例では、
obj1オブジェクトにobj2オブジェクトを移譲しています。
Object.assign() 適用後、
obj1オブジェクトは変更されしまいます。
obj1はobj3と同じオブジェクトになります。
 

let obj1={a:'ネコ',b:'イヌ',};
let obj2={b:'イヌ',c:'トリ'};

let obj3=Object.assign(obj1, obj2);

console.log(obj3);
console.log(obj1);

{ a: 'ネコ', b: 'イヌ', c: 'トリ' }

{ a: 'ネコ', b: 'イヌ', c: 'トリ' }

Spread Propertiesの使い方

スプレッドプロパティは、
オブジェクトを連結します。
下の例では、
obj4オブジェクトにobj5オブジェクトが連結して、
obj6オブジェクトになります。
しかし、
元のobj4は、
スプレッドプロパティの後も変わりません。
Object.assign() とスプレッドプロパティでは
このあたりに違いが出ています。
 

let obj4={a:'ネコ',b:'イヌ',};
let obj5={b:'イヌ',c:'トリ'};

let obj6={...obj4,...obj5};

console.log(obj6);
console.log(obj4);

{ a: 'ネコ', b: 'イヌ', c: 'トリ' }

{ a: 'ネコ', b: 'イヌ' }

Rest Propertiesの使い方

レストプロパティは、
スプレッドプロパティの逆になります。
要素を選び、要約して、
新しいオブジェクトを作ります。
下の例では、
オブジェクト{a:'ネコ',b:'イヌ',c:'トリ'}を、
要素aと要素...yを選び、
ｙを{ b: 'イヌ', c: 'トリ' }にまとめています。

Rest/Spread Propertiesの機能は、
以外と新しく、
ECMAScript proposal (ES2018) に加えられたものです。
 

let {a,...y} = {a:'ネコ',b:'イヌ',c:'トリ'};

console.log(y);

{ b: 'イヌ', c: 'トリ' }