スプレッド演算子をconsole.logで出力した際の結果

Question

スプレッド演算子がどのような意味を持つのか調べて見てもよくわからなかったので、
サーバーサイドからJsonで受け取った値をconsole.logで出力しようとしたところ、
splead演算子を使用して出力した場合と、使用せずに出力した場合の結果が変わりませんでした。

console.log({...data}); //[object Object]
console.log(data);      //[object Object]

console.log(JSON.parse(JSON.stringify({...data}))); 
//{user1:{...}, user2:{...}, ...}

console.log(JSON.parse(JSON.stringify(data))); 
//{user1:{...}, user2:{...}, ...}

スプレッド演算子は配列の中身を展開するという理解でおりますが、
上記のようにconsole.logをしようした場合、なぜスプレッド関数を使わない場合と同じ結果になるのでしょうか。

Javascriptの基礎知識が不足しているので、的外れな質問かもしれないですが
お答え出来る方がおりましたらお願いします。

Answer 1

複雑に考えすぎなのでは。

var o = {a: 1};

console.log(o);       // {a: 1}
console.log({...o});  // {a: 1}

上記コードでは、同じように、オブジェクト初期化子 {} で初期化しているのですから、「プロパティと値の集合体」として見れば、同じになりますよね。
変数 data の中身次第でいかようにも変化しますので、

• 変数 data に何が入っているのか
• data.__proto__ === ({}).__proto__ は成立するのか

この辺りを確認してみてはいかがですか。

Re: Oskata さん

Answer 2

{...data}は新しいオブジェクトを宣言し、dataのキーと値を全てコピーする事が目的です。

JavaScriptのオブジェクト、配列、関数のようなオブジェクトインスタンスの実装は、
メモリ空間上に配置されたアドレス番地で同じものか違うものかを見分けている為、
data === {...data}の結果がfalseになり、新しくオブジェクトを作っている事が確認できます。

var data = {name: "taro"};
console.log(data === data); // true
console.log(data === {...data}); // false

これの意味は2つあります。

• オブジェクトの参照を切る(シャローコピー)
• 別のプロパティを入れたい

JavaScriptのオブジェクトを変数に代入した場合、
変数にはメモリ空間上のアドレス番地が格納されることになります。
なので下記のようにdata2 = data;とした場合、両者には同じメモリ空間上にあるオブジェクトを参照していることになります。

var data = {name: "taro", age: 18};
var data2 = data;
data2.name = "jiro";
console.log(data); // {name: "jiro", age: 18}

これの恐ろしい所は、関数の引数として渡した先で、
引数のオブジェクトのプロパティの値を変えた場合、
関数の呼び出し元にあったはずのオブジェクトが知らぬ内に改変されるという不具合の原因になります。

dataには変更加えたくないんだけどなぁ…という時は下記のように使います。
こうしてコピーを取っておけば誰かが勝手にプロパティを書き換えても元のオブジェクトは変更されていないので安心ですね。

var data = {name: "taro", age: 18};
var data2 = {...data};
data2.name = "jiro";
console.log(data); // {name: "taro", age: 18}

また、このコードならば下記のように簡略的な書き方も出来ます。
2番目の使い方ですね。

var data = {name: "taro", age: 18};
var data2 = {...data, name: "jiro"};
console.log(data); // {name: "taro", age: 18}

Answer 3

どこでつまっているかわかりませんが
こちらでご理解むずかしいでしょうか？