JavaScript/スプレッド構文(...obj)とObject.assign()

• スプレッド構文(...obj)とObject.assign()の用途
• スプレッド構文の使い方
• Object.assign()の使い方
• シャローコピー
• マージ

スプレッド構文(...obj)とObject.assign()の用途

スプレッド構文(...obj)とObject.assign()はどちらもオブジェクトのシャローコピーやマージに使用される。

スプレッド構文の使い方

//配列の場合
const fruits = ['apple', 'banana', 'grape'];
const fruits2 = [...fruits, 'peach'];  //...(コピー元の配列名)

console.log(fruits2);  //['apple', 'banana', 'grape', 'peach']
console.log(fruits2.shift());  //apple

//オブジェクトの場合
const person = {
  name: 'Takuto',
  gender: '男',
};
const person2 = {...person, age: 20};  //...(コピー元のオブジェクト名)

console.log(person2);  //{name: 'Takuto', gender: '男', age: 20}

Object.assign()の使い方

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const returnedTarget = Object.assign(target, source);
console.log(returnedTarget);  //{a: 1, b: 3, c: 4}
//targetも更新される
console.log(target);  //{a: 1, b: 3, c: 4}

引数はいくらでも指定できてキーが被っていた場合は後の引数のものが優先される

シャローコピー

シャローコピーとはオブジェクトや配列の1階層目のプロパティだけをコピーする。
ネストされたオブジェクトや配列は参照が共有されるため、元のオブジェクトも影響を受ける。

スプレッド構文を用いた場合

const person = {
  name: 'Takuto',
  gender: '男',
  info: {
    age: 20,
    interests: 'reading',
  },
};

const shallowcopy = {...person};  //シャローコピー 

shallowcopy.name = 'Kazuya';
shallowcopy.info.age = 21;

console.log(person.name);  //Takuto  変更されない
console.log(person.info.age);  //21  変更される

Object.assign()を用いた場合

シャローコピーの行を以下に変更

const shallowcopy = Object.assign({}, person);  //シャローコピー

マージ

スプレッド構文を用いた場合

const person = {
  name: 'Takuto',
  gender: '男',
  age: 20
};

const person2 = {
  name: 'Takuto',
  gender: '男',
  age: 21,
  interests: 'reading',
};

const merged = {...person, ...person2};  //マージ

console.log(merged);  //{name: 'Takuto', gender: '男', age: 21, interests: 'reading'}

Object.assign()を用いた場合

マージの行を以下に変更

const merged = Object.assign({}, person, person2);  //マージ