valid,invalid

関心を持てる事柄について

スプレッド構文と 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
  • 簡潔

デメリット

Object.assign

メリット

  • 標準化されている
  • 引数を動的に取ることができる
const sources = [{ a: 1 }, { b: 2 }];

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

デメリット


感想

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

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

参考

Object.assign() - JavaScript | MDN

スプレッド構文 - JavaScript | MDN

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