JavaScriptで変数の値が期待していたものと違う

Question

JavaScriptでシャローコピーを試している中で、
コンソールログでの表示内容が期待していた値と違いわかりません。
初心者な者でご教授の程、宜しくお願い致します。

ary1[0].nationality = 'usa'; (最終行)
を実行する前なので期待していた値は
[
{nationality: "japan"}
]
なのですがなぜ
[
{nationality: "usa"}
]
が表示されるのでしょうか？

const ary = [
  {nationality: 'japan'},
  {age: 20}
];
const ary1 = ary.slice(0,1);
console.log(ary1);
ary1[0].nationality = 'usa';

Answer 1

コンソールを実行後に開いた、ということはないでしょうか。

オブジェクトを後から展開した場合、展開した瞬間の状態が表示されることがあります。

Comments

[practice1]

ご回答頂きありがとうございます。そういう事が発生する場合があるのですね。webpack-dev-serverの#0CJS（Zero-Config JS)の環境で試しているのですが、この環境だけが不具合なのかも知れません。他の環境でも試して見ます。ご丁寧にありがとうございます。

[oikashinoa]

https://analogic.jp/console-dir-log-caution/

これが参考になると思います。
書かれている黒魔術的解決策も参考にしてください。

あとteratailでも同様の質問、回答があります。
（2019/12/10 12:11追記）
https://teratail.com/questions/173019

[practice1]

oikashinoaさんご回答ありがとうございます。リンク先が大変参考になりました。
こういった事が発生しえる可能性が知れて大変勉強になりました。

Answer 2

ブラウザでの実行で、開発者ツールで確認する場合、maisumakunさんの書いているような問題が起こるので、JavaSciptの言語の学習目的であれば、
・ブラウザを使わず、node.jsを使って、普通の言語のように実行する
・ブラウザのコンソールを使うなら、コンソールから、1行ずつ打ち込む
・表示にconsole.logを使わず、alertとかdocument.writeを使う（すすめないが）
とか。

Comments

[practice1]

ご回答頂きありがとうございます。node.js環境が確実なのですね。ご教授ありがとうございます。

[otn]

node.jsだと、ブラウザの機能は（少なくともそのままでは）実行できないので、目的次第です。

[practice1]

続けてありがとうございます。参考になりました。

Answer 3

普通にjapanが当方では取得されました。

どこか別のconsole.logが反応しているのかキャッシュの問題では？

サンプル

Comments

[practice1]

ご回答頂きありがとうございます。Web上の環境で試して見る事も手順なのですね。勉強になります。
キャッシュの問題とありますが、どういった手順を踏めば宜しいのでしょうか？参考のURLでも
構いませんのでご教授お願い致します。

[kyoya0819]

スーパーリロードやプライベートモードで見ると良いかもしれません。

http://www.netyasun.com/browser/reload.html

[practice1]

ご回答ありがとうございます。スーパーリロードは試してみましたが、解決しませんでし。他の方法も追って試してみます。ご丁寧にありがとうございました。

[kyoya0819]

環境は何でしょうか？

[practice1]

引き続きありがとうございます。webpack-dev-serverローカルサーバーを立ち上げ、chrome78.0.3904.108 (Official Build) (64-bit)で実行しました。単純にローカルサーバーを使わない環境でも同じ結果が表示されました。参照型変数はオブジェクトを展開した瞬間の状態が表示される事があるとわかりました。