Object.assign() の使い方

Object.assign() は、1つ以上のソースオブジェクトから、ターゲットオブジェクトにプロパティをコピーするメソッドです。オブジェクトのマージやシャローコピーによく使用されます。

基本的な使い方

第1引数がターゲット（コピー先）、第2引数以降がソース（コピー元）です。

const target = { a: 1 };
const source = { b: 2 };

const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 2 }
console.log(target); // { a: 1, b: 2 }（ターゲットも変更される）

重要な点として、Object.assign() はターゲットオブジェクト自体を変更し、それを戻り値として返します。

オブジェクトのシャローコピー

空のオブジェクトをターゲットにすることで、シャローコピーを作成できます。

const original = { name: "田中", age: 25 };
const copy = Object.assign({}, original);

copy.name = "山田";
console.log(original.name); // "田中"（影響なし）

複数オブジェクトのマージ

複数のソースオブジェクトを指定すると、順番にマージされます。同じキーがある場合、後のオブジェクトの値で上書きされます。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { c: 5, d: 6 };

const merged = Object.assign({}, obj1, obj2, obj3);
console.log(merged); // { a: 1, b: 3, c: 5, d: 6 }

obj1 のプロパティをコピー

obj2 のプロパティをコピー（b を上書き）

obj3 のプロパティをコピー（c を上書き）

デフォルト値の設定

Object.assign() を使って、オプションにデフォルト値を設定するパターンがよく使われます。

function createUser(options) {
  const defaults = {
    name: "名無し",
    age: 0,
    active: true
  };
  
  const user = Object.assign({}, defaults, options);
  return user;
}

const user1 = createUser({ name: "田中" });
console.log(user1); // { name: "田中", age: 0, active: true }

シャローコピーであることに注意

Object.assign() はシャローコピーです。ネストしたオブジェクトは参照がコピーされるだけで、深いコピーにはなりません。

const original = {
  name: "田中",
  address: { city: "東京" }
};

const copy = Object.assign({}, original);

copy.address.city = "大阪";
console.log(original.address.city); // "大阪"（影響を受ける！）

ネストしたオブジェクトも含めて完全にコピーしたい場合は、structuredClone() やスプレッド構文との組み合わせを検討してください。

スプレッド構文との比較

ES6 以降では、スプレッド構文を使う方が簡潔に書けるため、Object.assign() の代わりに使われることが増えています。

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

// スプレッド構文（同じ結果）
const copy2 = { ...obj1, ...obj2 };

ただし、Object.assign() はターゲットオブジェクトを直接変更できる点で、用途によっては便利な場面もあります。