Object.assignとスプレッド構文 | オブジェクトのマージ | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

オブジェクトのマージとは？

オブジェクトのマージとは、複数のオブジェクトを結合して、新しいオブジェクトを作成することです。

JavaScriptでは、Object.assign()やスプレッド構文（...）を使って簡単にオブジェクトを結合できます。設定値の上書きや、複数のデータをまとめる場面でよく利用されます。

Object.assign()でマージする

Object.assign()は、複数のオブジェクトのプロパティを1つのオブジェクトへコピーします。

const obj1 = {
    a: 1,
    b: 2
};

const obj2 = {
    b: 3,
    c: 4
};

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

console.log(merged);

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

{
  a: 1,
  b: 3,
  c: 4
}

同じプロパティ名がある場合は、後から指定したオブジェクトの値で上書きされます。

スプレッド構文でマージする

ES2018以降では、スプレッド構文を使う方法が最も一般的です。

const obj1 = {
    a: 1,
    b: 2
};

const obj2 = {
    b: 3,
    c: 4
};

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

console.log(merged);

こちらも実行結果は同じです。

{
  a: 1,
  b: 3,
  c: 4
}

コードが短く読みやすいため、現在はこちらがよく利用されています。

プロパティが重複した場合

同じプロパティ名が存在する場合は、後ろに書かれたオブジェクトの値が優先されます。

const user = {
    name: "Taro",
    age: 20
};

const update = {
    age: 25
};

const result = {
    ...user,
    ...update
};

console.log(result);

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

{
  name: "Taro",
  age: 25
}

ageは後から指定した値で上書きされています。

Object.assign()とスプレッド構文の比較

浅いコピーに注意

どちらの方法も浅いコピー（Shallow Copy）です。ネストされたオブジェクトまではコピーされず、参照が共有されます。

const original = {
    user: {
        name: "Taro"
    }
};

const copied = {
    ...original
};

copied.user.name = "Hanako";

console.log(original.user.name);

Hanako

ネストされたオブジェクトは共有されているため、コピー側の変更が元のオブジェクトにも反映されます。

深いコピーを行いたい場合

ネストされたオブジェクトまで完全にコピーしたい場合は、structuredClone()（対応環境）や、用途によってはライブラリを利用します。

const original = {
    user: {
        name: "Taro"
    }
};

const copied = structuredClone(original);

copied.user.name = "Hanako";

console.log(original.user.name);

Taro

この場合は元のオブジェクトには影響しません。

まとめ

• オブジェクトのマージは複数のオブジェクトを1つにまとめる操作である。
• Object.assign()とスプレッド構文で簡単にマージできる。
• 同じプロパティ名がある場合は後から指定した値で上書きされる。
• 現在はスプレッド構文を使うことが多い。
• どちらも浅いコピーであり、ネストされたオブジェクトは共有される。
• 深いコピーが必要な場合はstructuredClone()などを利用する。