スプレッド構文と Object.assign の違い

JavaScript の Object の spread operator (スプレッド構文) と Object.assign の違いを調べてわかった気になるが何度も忘れるので整理

結論

実質ほぼ同じことが実現できるが互換性の問題があるので Babel や TypeScript でトランスパイルするなら spread operator を使っておきたい。

前提

実質ほぼ同じことが実現できる。

const object1 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
};

const object2 = {
  b: 4,
  c: {
    d: 5
  }
};

const spreaded = {...object1, ...object2};
console.log(spreaded);
// > Object { a: 1, b: 4, c: Object { d: 5 } }

const assigned = Object.assign({}, object1, object2);
console.log(assigned);
// > Object { a: 1, b: 4, c: Object { d: 5 } }

また、どちらも shallow copy である。

Spread operator

メリット

• サポートしていない環境で動かす場合には、Babel などでトランスパイルするだけでOK
• 簡潔

デメリット

• 標準化プロセスの中途である（2018/03/27 時点で stage4）
• 動的に展開できない

Object.assign

メリット

• 標準化されている
• 引数を動的に取ることができる

const sources = [{ a: 1 }, { b: 2 }];

const assigned = Object.assign.apply(Object, [{}].concat(sources));
console.log(assigned);
// > Object { a: 1, b: 2 }

デメリット

• 冗長
• サポートしていない環境で動かす場合には、polyfill が必要
  • Android の古い標準ブラウザとかIEではサポートしていない Object.assign() - JavaScript | MDN

---

感想

「標準化されている」ことはメリットとして挙げられるはずなのに、標準化されているからこそトランスパイル対象外になってしまい、避けたくなってしまう？？

何か間違っている気が…。

参考

Object.assign() - JavaScript | MDN

スプレッド構文 - JavaScript | MDN

javascript - Object spread vs. Object.assign - Stack Overflow