Help us understand the problem. What is going on with this article?

【javascript】Object.assign

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

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はプロパティに値を割り当てるだけで、プロパティを再定義しない。
yktk435
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした