【javaScript】Object.assignの使い方

Object.assignの使い方を見ていきます。

先に参考にさせてもらったサイトの紹介です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object

スポンサーリンク




概要

1 個以上のソースオブジェクトについて、その直接所有 (own)で列挙可能なプロパティの値をすべてターゲットオブジェクトにコピーして、新しいオブジェクトを生成します。

と記載されていますが、簡単に言うと、

オブジェクトとオブジェクトをくっつけて、新しいオブジェクトを作ることができるメソッドです(解釈なので、細かい部分は曖昧に…)。

使い方

では、簡単に使い方を見ていきます。

var a = {"a" : "A"}
var b = {"b" : "B"}
var c = Object.assign(a, b)

// 同じ意味の書き方
// var c = {}
// Object.assign(c, a, b)

console.log(c)
{a: "A", b: "B"}

となります。

<解説>
オブジェクトa、bが結合されてcという新しいオブジェクトが作成されました。

同じ意味の書き方と書いてあるコードと2つ記載しましたが、返り値を受け取る変数を=で書くとその変数に新しいオブジェクトが代入されます。

=を使わずに書くと、第1引数のオブジェクトに結合された値が代入されます。

ここがポイントであるのと同時に、注意する点でもあります。

注意

先程、=を使わずに書くパターンについては第1引数に値が代入されると言いましたが、ここでバグを引き起こしてしまうことがあります。

const a = {"a" : "A"}
const b = {"b" : "B"}
Object.assign(a, b)

console.log(a)
{a: "A", b: "B"}

このように書いた場合は、constで宣言していてもaの値は書き換わってしまいます。

そのため、aに新しい値が入ったあとに、それに気づかずaを後続の処理で利用した場合にバグが起きる可能性があります。

そうならないために、第1引数には必ず{}のオブジェクトを入れたり、もしくは=で結合された値を代入できる変数を書いておく方がいいと思います。

配列を引数に入れた場合

配列を引数に入れる、どういったオブジェクトが出来上がるのか気になったのでチェックしてみる。

Object.assign([1,2],[3,4])
// [3,4]

Object.assign([1,2],[3,4],[4,5])
// [4,5]

Object.assign({"a":[1,2]},{"b":[6,7]},{"c":[4,5]})
// {a: [1,2], b: [6,7], c: [4,5]}

なるほど、配列を引数に渡すと最後の配列のオブジェクトが何故かのこり、その他は消えてしまう。

JSONオブジェクトの形式を渡すことで意図した動きをしてくれているのだろう。

ここにもこんな落とし穴があったとは。。。

まとめ

私の周りではObject.assignを利用しているが、他の開発ではあまり利用されないのだろうか。。?

かなり使い方に癖のあるメソッドだが、一度その癖を理解してしまえば利用用途は広がるだろうと思う。

スポンサーリンク

スポンサーリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする