JavaScript オブジェクトについて

Question

let x = [10, 9];
let y = x;
x[0] = 3
console.log(x);　//=> [3, 9]
console.log(y);  //=> [3, 9]

このようにconsole.log(y)が[10, 9]にならないのは、「この値そのものがコピーされるのではなくて、この値がある位置はここだよ、という情報だけがコピーされるので注意しておきましょう。」と説明がなされていました。

しかし、

let x = [10, 9];
let y = x;
x = [5, 1];
console.log(x); //=> [5, 1]
console.log(y); //=> [10, 9]

となりました。説明通りだと、console.log(y)は[5, 1]になるはずです。
これはどういうことなのでしょうか？

Answer 1

JavaScriptはオブジェクト系(オブジェクト・配列・関数などなど)と、
プリミティブ系(文字列、数値、論理値等)があります。

この内、オブジェクト系に該当するものは参照の値渡しになります。
「参照の値渡し」ってなんやねん？この辺の記事を見ながら参照の値渡しへの理解を深めてください。
https://qiita.com/mozisan/items/1b9d4bf5a1bb341dd354

質問文の上の方はこのような挙動になります。

// メモリ空間上に配列[10, 9]を生成し、そのアドレス番地をxに代入
let x = [10, 9];

// xに入っているアドレス番地と同じものをyに代入
let y = x;

// メモリ空間上の配列0番目の要素に3を代入
x[0] = 3

// xとyが参照しているメモリ空間上の配列は同じものなので、どちらも1番目の要素が書き換わる
console.log(x);　//=> [3, 9]
console.log(y);  //=> [3, 9]

質問文の下の方はこのような挙動になります。

// メモリ空間上に配列[10, 9]を生成し、そのアドレス番地をxに代入
let x = [10, 9];

// xに入っているアドレス番地と同じものをyに代入
let y = x;

// メモリ空間上に新しい配列[5, 1]を生成し、そのアドレス番地をxに代入
x = [5, 1];

// xとyに格納されているアドレス番地は異なる為、異なる結果が表示される
console.log(x); //=> [5, 1]
console.log(y); //=> [10, 9]

Answer 2

説明通りだと、console.log(y)は[5, 1]になるはずです。

いえ、x = [5, 1];では、新しい配列を作ってxに代入しています。もともとxやyに入っていた配列に対して変化を加えているわけではないので、yは何も変化しません。

Answer 3

質問者が想定している挙動は参照渡しですが、実際には参照の値渡しです。

• 参照の値渡し JavaScript - Google 検索

Re: aacchan さん

Comments

[maisumakun]

あれ、回答も相手も間違っていませんか？

[think49]

回答ポスト時の本文は下記であり、[編集] でもそのようにあります。
運営に問い合わせますが、回答内容はコメントのものとしてください。
---
質問者が想定している挙動は**参照渡し**ですが、実際には**参照の値渡し**です。

- [参照の値渡し JavaScript - Google 検索](https://www.google.com/search?q=%E5%8F%82%E7%85%A7%E3%81%AE%E5%80%A4%E6%B8%A1%E3%81%97+JavaScript)

Re: aacchan さん

[maisumakun]

ぶった切れることはよくありますが、別な回答が入り込むのは初めて見た気がします。

[think49]

私も他所の回答本文が入る事例は初めてです。
運営に問い合わせしました。
https://teratail.com/questions/182237