【javascript】Object.assign

こちらの記事は以下の書籍を参考に執筆しました

• 入門JavaScriptプログラミング

#Object.assignについて
Object.assignは引数として任意のオブジェクトを受け取り、後続のオブジェクトの値をすべて最初のオブジェクトに割り当てルシ組になってます。

いずれかのオブジェクトに同じキーが含まれている場合はリスト右側のオブジェクトによってオブジェクトが上書きされます。

let a = { x: 9, y: 2, z: 5};
let b = { x: 4, y: 28};
let c = { x: 21};

Object.assign(a, b, c);
console.log(a) //{x:21,y:28,z:5};

出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。

不完全なオブジェクトを受け取り欠けている値を補う、またはカスタマイズが可能になります。

#Object.assing使用時のミューテーション回避
Object.assignが変更するのはパラメータリストの最初のオブジェクトであり、残りは変更されない。
上記の例だとオブジェクトaを上書きしていることになる。aは変更せずコピーを作成し、それを変更したい時にはどうするか。
常套手段は、最初のオブジェクトを空のオブジェクトリテラルにすること。

let newObject = {};
Object.assign(newObject, { foo: 1}, { bar: 2});
console.log(newObject); //{foo: 1, bar: 2}

出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。

これは以下のように簡略化もできる。

let newObject = Object.assign({}, { foo: 1}, { bar: 2});
console.log(newObject); //{foo: 1, bar: 2}

出典：入門JavaScriptプログラミング
プロパティ名と変数名が同じになる場合はこのように簡潔にできる。

#Object.assignが値を割り当てる仕組み
ここまでを見ているとObject.assignは右のオブジェクトを左にオブジェクトにマージすると思ってしまうが、必ずしもそうではない。

1. Object.assignは右のオブジェクトを左のオブジェクトに割り当てているだけ。
2. 代入を実行するだけで再定義をしない。
3. 割当の対象となるのはオブジェクト自体の列挙可能なプロパティだけ
   3に関してはオブジェクトのプロトタイプチェーンのプロパティには割り当てられないよ言うことである。

#Object.assignまとめ

• Object.assign複数オブジェクトのプロパティからの値をベースオブジェクトに割り当てる。
• Object.assignはデフォルト値を設定するために使用できる。
• Object.assignは。オブジェクトを新しいプロパティで拡張するために使用できる。
• Object.assignは変更されたオブジェクトを返すため、最初の引数として{}を使用するとコピーできる。
• Object.assignはプロパティに値を割り当てるだけで、プロパティを再定義しない。