JavaScriptのObject.assign()を使いこなす

JavaScriptのObject.assign()を使いこなす JavaScript

JavaScriptでオブジェクトをマージしたり、他のオブジェクトのプロパティをコピーしたい場合、Object.assign()メソッドが便利です。この記事では、Object.assign() の基本的な使い方を学び、オブジェクト操作のスキルを向上させましょう。

Object.assign()とは

Object.assign() は、JavaScriptの組み込みメソッドであり、一つ以上のソースオブジェクトの列挙可能なプロパティをターゲットオブジェクトにコピーします。複数のソースオブジェクトが与えられた場合、後続のオブジェクトのプロパティは、前のオブジェクトの同じプロパティを上書きします。このメソッドは、ターゲットオブジェクト自体を変更し、変更されたターゲットオブジェクトを返します。

基本的な使い方

Object.assign() の基本的な使い方を見てみましょう。以下は、二つのオブジェクトをマージする例です。

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };

const result = Object.assign(object1, object2);
console.log(result); // { a: 1, b: 3, c: 4 }
console.log(object1) // { a: 1, b: 3, c: 4 }
console.log(object2) // { b: 3, c: 4 }

この例では、object2 のプロパティが object1 にコピーされ、object1 が更新されます。b プロパティは object1 と object2 の両方に存在するため、object2 の値が object1 の値を上書きします。

オブジェクトのディープコピー

Object.assign() は、ソースオブジェクトのプロパティを浅くコピーします。これは、ネストされたオブジェクトが参照としてコピーされることを意味します。ディープコピーが必要な場合は、以下のようにJSONメソッドを使用できます。

const originalObject = { a: 1, b: { c: 2 } };

// DeepCopy: ネストされたオブジェクトも含めて完全に新しいオブジェクトが作成される
const deepCopy = JSON.parse(JSON.stringify(originalObject));
console.log(deepCopy);

// ShallowCopy: ネストされたオブジェクトは参照としてコピーされる（オリジナルオブジェクトと同じネストされたオブジェクトを参照する）
const shallowCopy = Object.assign({}, originalObject);
console.log(shallowCopy);

// ネストされてないオブジェクトを変更する
originalObject.a = 3;

// ネストされたオブジェクトを変更する
originalObject.b.c = 3;

// DeepCopyの結果を表示（
// ネストされてないオブジェクトが変更されていないことが確認できる）
// ネストされたオブジェクトが変更されていないことが確認できる）
console.log('DeepCopy after change:', deepCopy); // { a: 1, b: { c: 2 } }

// ShallowCopyの結果を表示
// ネストされてないオブジェクトが変更されていないことが確認できる）
//（ネストされたオブジェクトが変更されていることが確認できる）
console.log('ShallowCopy after change:', shallowCopy); // { a: 1, b: { c: 3 } }

ただし、この方法は、オブジェクト内の関数やシンボルをコピーできません。

注意点

Object.assign() を使用する際には、以下の注意点を頭に入れておくと良いでしょう。

  1. オブジェクト内のプロパティは、列挙可能なプロパティのみコピーされます。
  2. プロパティの値がオブジェクトの場合、参照がコピーされます（ディープコピーではありません）。
  3. ターゲットオブジェクト(第1引数)自体が変更されるため、オリジナルオブジェクトを変更しないようにするには、空のオブジェクトをターゲットオブジェクトとして使用してください。

まとめ

Object.assign() は、JavaScriptでオブジェクトを操作する際に非常に便利なメソッドです。オブジェクトのプロパティをマージしたり、コピーする際に活用しましょう。ただし、ディープコピーが必要な場合や、オリジナルオブジェクトを変更したくない場合には注意が必要です。適切な方法を選択し、オブジェクト操作のスキルを向上させていきましょう。

Object.assign() を使いこなすことで、JavaScriptのオブジェクト操作がより簡単かつ効率的になります。この記事で紹介した基本的な使い方と注意点を覚えておくことで、コードの品質と可読性を向上させることができます。これからもJavaScriptを学び続け、より高度なオブジェクト操作に挑戦していきましょう。

タイトルとURLをコピーしました