【JavaScript ECMAScript】Object::Object.assign静的メソッドの使い方

Object.assign()メソッドは、一つ以上のソースオブジェクトから、列挙可能な自身のプロパティをターゲットオブジェクトにコピーし、そのターゲットオブジェクトを返すメソッドです。このメソッドは、Objectクラスの静的メソッドとして提供されており、新しいオブジェクトを結合したり、既存のオブジェクトを拡張したりする際に利用されます。

引数としては、最初にコピー先のオブジェクトであるtargetを一つ指定します。次に、コピー元となるsourceオブジェクトを0個以上指定することができます。複数のsourceオブジェクトを指定した場合、後のsourceオブジェクトに同じプロパティ名が存在すると、前のsourceオブジェクトのプロパティを上書きします。

このコピーは「シャローコピー（浅いコピー）」です。つまり、プロパティの値がプリミティブ（文字列、数値など）であれば値が直接コピーされますが、プロパティの値がオブジェクトへの参照（別のオブジェクトや配列など）である場合、その参照自体がコピーされます。これにより、コピー元のオブジェクトとコピー先のオブジェクトが同じ参照を共有することになり、どちらか一方を変更するともう一方にも影響が及ぶ可能性がありますので、注意が必要です。

また、Object.assign()は、getter（値を読み出すための特別な関数）を持つプロパティについてはその評価された値がコピーされますが、setter（値を設定するための特別な関数）を持つプロパティは無視されます。シンボル型のプロパティもコピーの対象となります。オブジェクトのマージやデフォルトプロパティの設定といった用途で非常に便利ですが、シャローコピーの特性を理解して利用することが重要です。

Copy
1const targetObject = {};
2const sourceObject1 = { key1: 'value1' };
3const sourceObject2 = { key2: 'value2' };
4
5Object.assign(targetObject, sourceObject1, sourceObject2);

target, ...sources

• target: object: コピー元のオブジェクト。このオブジェクトにプロパティがコピーされます。
• ...sources: object: コピー先のオブジェクト。複数のオブジェクトを指定でき、プロパティは左から右へと順番にコピーされます。

Object

指定されたソースオブジェクトのプロパティをすべてコピーし、新しいオブジェクトにマージした結果のオブジェクトを返します。