Javascript

【JavaScript】Object.asignメソッドについて理解をまとめる

 

こんにちは、ともです。

JavaScriptを勉強中でして、JavaScriptってオブジェクトばっかりであることが分かりました。

だからこそ、オブジェクトを操作するメソッド（Objectオブジェクト）に登録されているメソッドを理解していきたいと考えています。

この記事ではMDNを参考にObject.assignの簡単な利用方法についてまとめておきます。

参考にしたサイト

Object.assign()｜MDN

Object.assignとは

オブジェクト同士をマージする機能です。

Object.assign() メソッドは、すべての列挙可能なプロパティの値を、1つ以上のコピー元オブジェクトからコピー先オブジェクトにコピーするために使用されます。戻り値としてコピー先オブジェクトを返します。Object.assign()｜MDN

Object.assign(target, ...sources)
// target コピー先
// sources コピー元

サンプルコードは下記です。

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

const object2 = Object.assign({ d: 4 }, object1);

console.log(object2); //{ a: 1, b: 2, c: 3, d: 4}

第一引数と第二引数にセットしたオブジェクトをマージして新たなオブジェクトを返り値としています。

空のオブジェクトとのassingでコピーを作る

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

const object2 = Object.assign({}, object1);

console.log(object2); //{ a: 1, b: 2, c: 3}

object2.a = 5;

console.log(object1)//{ a: 1, b: 2, c: 3}
console.log(object2)//{ a: 5, b: 2, c: 3}

このように空のオブジェクトとオブジェクトをassignすることにより結果としてオブジェクトの複製を生成することが可能です。

同じプロパティを持つ場合

const object = Object.assign({ a: 1 }, { a: 2 }, { a: 3 });

console.log(object); //{ a: 3}

かなりシンプルな例を出しました。

arg2をarg1とマージし、arg3をarg1とマージしていると考えると分かり易いかも知れません。引数順が後のもので上書きしていきます。

コピー先が変化する

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

const object2 = Object.assign(object1, { d: 4 });

console.log(object1); // {a: 1, b:2, c:3, d: 4}
console.log(object2); // {a: 1, b:2, c:3, d: 4}

第一引数にどんどんマージしていくので上記の例の場合object1も変化します。

まとめ

とても単純な

関連記事はこちら