Object.assign vs スプレッド構文：JavaScript オブジェクトのマージ方法徹底比較

2024-04-05

JavaScriptオブジェクトのプロパティをマージする方法

Object.assignを使う

Object.assign は、ターゲットオブジェクトにソースオブジェクトのプロパティをコピーするメソッドです。

const obj1 = {
  name: "John Doe",
  age: 30,
};

const obj2 = {
  email: "[email protected]",
  address: "123 Main Street",
};

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj);
// { name: 'John Doe', age: 30, email: '[email protected]', address: '123 Main Street' }

このコードでは、obj1 と obj2 のプロパティを mergedObj という新しいオブジェクトにマージしています。

Object.assign の利点は、以下のとおりです。

使い方が簡単
引数に複数のオブジェクトを渡すことができる
プロパティの値がオブジェクトの場合でも、浅いコピーが作成される

ターゲットオブジェクトが変更される

スプレッド構文は、オブジェクトリテラルや配列の要素を展開する構文です。

const obj1 = {
  name: "John Doe",
  age: 30,
};

const obj2 = {
  email: "[email protected]",
  address: "123 Main Street",
};

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);
// { name: 'John Doe', age: 30, email: '[email protected]', address: '123 Main Street' }

スプレッド構文の利点は、以下のとおりです。

Object.assign よりもコードが冗長になる
オブジェクトの順序が重要になる

ターゲットオブジェクトを変更しても問題ない場合は、Object.assign を使うと簡単です。
ターゲットオブジェクトを変更したくない場合や、プロパティの値がオブジェクトの場合に深いコピーを作成したい場合は、スプレッド構文を使うべきです。

上記以外にも、以下の方法でオブジェクトをマージすることができます。

for...in ループ
Lodash などのライブラリ

これらの方法は、上記の方法よりも複雑ですが、より柔軟なマージ処理を行うことができます。

JavaScriptでオブジェクトのプロパティをマージするには、いくつかの方法があります。どの方法を使うべきかは、状況によって異なります。

Object.assignを使う

const obj1 = {
  name: "John Doe",
  age: 30,
};

const obj2 = {
  email: "[email protected]",
  address: "123 Main Street",
};

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj);
// { name: 'John Doe', age: 30, email: '[email protected]', address: '123 Main Street' }

スプレッド構文を使う

const obj1 = {
  name: "John Doe",
  age: 30,
};

const obj2 = {
  email: "[email protected]",
  address: "123 Main Street",
};

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);
// { name: 'John Doe', age: 30, email: '[email protected]', address: '123 Main Street' }

for...in ループを使う

const obj1 = {
  name: "John Doe",
  age: 30,
};

const obj2 = {
  email: "[email protected]",
  address: "123 Main Street",
};

const mergedObj = {};

for (const key in obj1) {
  mergedObj[key] = obj1[key];
}

for (const key in obj2) {
  mergedObj[key] = obj2[key];
}

console.log(mergedObj);
// { name: 'John Doe', age: 30, email: '[email protected]', address: '123 Main Street' }

Lodash などのライブラリを使う

const _ = require('lodash');

const obj1 = {
  name: "John Doe",
  age: 30,
};

const obj2 = {
  email: "[email protected]",
  address: "123 Main Street",
};

const mergedObj = _.merge(obj1, obj2);

console.log(mergedObj);
// { name: 'John Doe', age: 30, email: '[email protected]', address: '123 Main Street' }