【ES6】JavaScriptのObject型のassign()メソッドを詳しく解説

JavaScript

本記事では、ES6におけるJavaScriptのObject.assign()メソッドの使用方法について説明します。

目次

JavaScriptのObject.assignメソッドとは

以下に、Object.assign()メソッドの構文を示します。

Object.assign(targetObject, ...sourceObject)

Object.assign()は、sourceObjectからtargetObjectに、すべての列挙可能なプロパティと自身のプロパティをコピーして、targetObjectを返します。

また、Object.assign()はsourceObjectのゲッターとtargetObjectのセッターを呼び出します。プロパティの割り当てのみで、プロパティのコピーや新規定義は行いません。

JavaScriptのObject.assign()の具体的な使用例

では、Object.assign()メソッドを使用したコード例を2つほど紹介します。

  • オブジェクトをコピーする
  • オブジェクトを結合する

Object.assign()を使ってオブジェクトのコピーを作成する方法

以下は、Object.assign()を使用してオブジェクトをコピーするコードです。

let widget = { color: 'black' };
let copyWidget = Object.assign({}, widget);

console.log(copyWidget); // { color: 'black' }

Object.assign()は浅いコピーをするだけで、深いコピーはしないことに注意してください。

Object.assign()を使ってオブジェクトを結合する方法

let status = { height: 55, width: 36 };
let style = { color: 'green', borderStyle: 'solid' };

let result = Object.assign({}, status, style);

console.log(result); 
// {
//    height: 55,
//    width: 36,
//    color: 'green',
//    borderStyle: 'solid'
// }

ちなみに、sourceObjectが同じプロパティを持つ場合は、後のオブジェクトのプロパティが先のオブジェクトを上書きします。

let status = { height: 55, width: 36, color: 'green' };
let style = { color: 'blue', borderStyle: 'solid' };

let result = Object.assign({}, status, style);

console.log(result);
// {
//    height: 55,
//    width: 36,
//    color: 'blue',
//    borderStyle: 'solid'
// }

タイトルとURLをコピーしました