【JavaScript】Object.assignを理解する

JavaScriptを利用してアプリケーションコードを記述していると2つのオブジェクトをマージしたいという場面に頻繁に出くわします。そのような場面においてObject.assignを利用することで簡単にオブジェクトをマージ(まとめる)することができます。

オブジェクトをマージする際に2つのオブジェクトが同じプロパティを持っているとその値を上書きすることができます。またObject.assignはオブジェクトの上書きだけに利用されるものではなくオブジェクトの複製にも利用することができます。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のコピー（クローン）

Object.assignはオブジェクトのコピーにも頻繁に利用されます。第一引数に空のオブジェクトを指定することで全く新しいuser_cloneというオブジェクトを作成することができます。

let user = {firstName: 'John', lastName: 'Doe' };
let user_clone = Object.assign({}, user);

引数が複数ある場合

ここまではObject.assignの引数がtargetとsourceのみの2つのみでした。Object.assignでは複数の引数をとることができます。

let user = {
  username: "John",
};

let user_id = {
  id: 1,
};

let email = {
  email: "john@example.com",
};

user = Object.assign(user, user_id, email);

console.log(user);

//結果
{ username: 'John', id: 1, email: 'john@example.com' }

4つの引数でも大丈夫なのか確認しておきます。

let user = {
  username: "John",
};

let user_id = {
  id: 1,
};

let email = {
  email: "john@example.com",
};

let tel = {
  tel: "090-1111-1111",
};

user = Object.assign(user, user_id, email, tel);
//結果
{
  username: 'John',
  id: 1,
  email: 'john@example.com',
  tel: '090-1111-1111'
}

下記のように追加したオブジェクトに同じキーが入っている場合はどのキーが保存されるのか確認しておきます。最後に追加したオブジェクトで上書きされることがわかります。

let user = {
  id: 0,
};

let user_id_1 = {
  id: 1,
};

let user_id_2 = {
  id: 2,
};

let user_id_3 = {
  id: 3,
};

user = Object.assign(user, user_id_1, user_id_2, user_id_3);

console.log(user);
//結果
{ id: 3 }

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の値を変更することは可能です。このシンプルな例であればObject.assignを使う利点が分かりにくいと思います。

form.firstName = input.firstName;

先ほどとはことなりformの要素を少し複雑にした場合にObject.assignを利用するとコードがシンプルになることがわかります。7つにプロパティの内、3つのプロパティを一度に更新したい場合にObject.assignを利用すると下記のように3つの値のみ上書きすることができます。

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
}

またフォームで住所に関する値をaddressというオブジェクトで保持した場合も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
}

ここまでを理解することができたら、Object.assignの基本機能と使い方が理解できたと思います。まだ一度も利用したことがない人はぜひチャレンジしてみてください。