Object.assignを利用するとオブジェクトをマージすることができ、マージする際にオブジェクトが同じプロパティを持っていると上書きしてくれる機能を持っています。本文書ではObject.assignの基本操作とフォームの値の保持の例を使って説明を行なっています。

オブジェクトをマージする

2つのオブジェクトを用意し、Object.assignでマージするとどのような結果になるか確認します。


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

const returnedTarget = Object.assign(target, source);

console.log(target)
console.log(source)
console.log(returnedTarget)

実行すると以下の結果となります。Object.assignの第一引数のtargetはsourceがマージされますが、sourceの中身は変わりません。またObject.assignの戻り値のreturnedTargetには、マージされたオブジェクトが入ることがわかります。


$ node test.js 
{ a: 1, b: 2, c: 3, d: 4 }
{ c: 3, d: 4 }
{ a: 1, b: 2, c: 3, d: 4 }

Object.assignの戻り値はtargetであることがわかります。

オブジェクトをマージする(同じプロパティを持つ場合)

targetとsourceでbという同じプロパティを持つ場合にどのような結果になるか確認します。


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

const returnedTarget = Object.assign(target, source);

console.log(target)
console.log(source)
console.log(returnedTarget)

targetのプロパティbはsourceのプロパティbに上書きされることがわかります。


$ node test.js 
{ a: 1, b: 3, d: 4 }
{ b: 3, d: 4 }
{ a: 1, b: 3, d: 4 }

オブジェクトの配列の要素を更新する

3つのオブジェクトが入った配列を準備します。


emplyees = [
	{
		firstName : 'John',
		lastName: 'Doe'
	},
	{
		firstName: 'David',
		lastName: 'Hue',
	},
	{
		fistName: 'Jack',
		lastName: 'Daniel'
	}
];

2番目の配列のオブジェクトのlastNameだけ変更したい場合にObject.assignを利用することができます。


emplyees = [
	{
		firstName : 'John',
		lastName: 'Doe'
	},
	{
		firstName: 'David',
		lastName: 'Hue',
	},
	{
		fistName: 'Jack',
		lastName: 'Daniel'
	}
];

emplyee = {
	firstName: 'David',
	lastName: 'Cameron'
}

Object.assign(emplyees[1],emplyee);

実行結果は下記のようになります。


$ node test.js
[
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'David', lastName: 'Cameron' },
  { fistName: 'Jack', lastName: 'Daniel' }
]

Object.assignを使った例(form)

どのような時にObject.assignを使えばいいのかという疑問があると思うので入力フォームの値を保持するformオブジェクトを使って説明したいと思います。

formオブジェクトを準備します。firstNameとlastNameの2つのプロパティを持ちどちらも初期値はnullとします。


const form = {
	firstName: null,
	lastName: null
}

入力フォームに値が入り、inputオブジェクトで受け取ったとします。


const input = {
	firstName: 'John Doe'
}

formオブジェクトをinputオブジェクトで上書きする場合にObject.assignを利用すると下記のように記述することでfirstNameの値を上書きすることができます。


Object.assign(form, input)

結果は下記となります。


{ firstName: 'John Doe', lastName: null }

Object.assignを利用しなくても下記のようにfirstNameの値を変更することは可能です。


form.firstName = input.firstName;

formの要素を増やして少し複雑にした場合でもObject.assignを利用することができます。inputに保存されているプロパティのみ上書きすることができます。


const form = {
	firstName: null,
	lastName: null,
	Email: null,
	zipCode: null,
	Address: null,
	Phone: null
}

const input = {
	firstName: 'John',
	lastName: 'Doe',
	Email: 'john@example.com'
}

Object.assign(form, input)

console.log(form)

結果は下記のようになります。


 $ node test.js 
{
  firstName: 'John',
  lastName: 'Doe',
  Email: 'john@example.com',
  zipCode: null,
  Address: null,
  Phone: null
}

またフォームで住所に関する値をadressというオブジェクトで保持した場合もObject.assignを使ってformの値を上書きすることができます。


const address = {
	Address : {
		Prefecture: 'Tokyo',
		address_1: 'Setagaya-ku',
		address_2: 'kyoudou1'
	}
}
Object.assign(form, address);
console.log(form);

結果は下記となります。


 $ node test.js 
{
  firstName: 'John',
  lastName: 'Doe',
  Email: 'john@example.com',
  zipCode: null,
  Address: {
    Prefecture: 'Tokyo',
    address_1: 'Setagaya-ku',
    address_2: 'kyoudou1'
  },
  Phone: null
}