回答編集履歴

少々言葉尻を変えたり、例え入れたりした。

2019/10/28 01:43

投稿

miyabi_pudding

スコア9555

test CHANGED Viewed

@@ -84,7 +84,7 @@
 配列やオブジェクトではそもそも参照している段階が違うと言いますか、
-プリミティブなものとは、参照の段階が違うからです。
+プリミティブなものとは、参照している値が違うからです。
 ※今回の質問は配列ですが、オブジェクトの方が説明がしやすいので、オブジェクトで解説していきます。
@@ -124,7 +124,11 @@
+つまり、変数に、オブジェクト変数を代入すると、
+その代入先は、代入元のオブジェクト自体の参照となります。
-つまり、オブジェクトのプロパティに代入し直すと、
+そして、そのオブジェクトのプロパティに値を代入し直すと、
 そのプロパティ自体の値の参照が置き換わるが、
@@ -132,9 +136,21 @@
 a、b自体はなんら変わるわけではないわけです。
-（注意が必要なのは、同じ、`{key, value}`というオブジェクトを参照しているため。一見、aとbは不可分に見えるが、本質的には、代入した時点でaとbは独立している。）
+a、bは同じオブジェクトを参照しているため、bの方でプロパティの値参照を変えようと、aの方で変えようと、
+同じオブジェクトを参照しているため、プロパティは共通の値となるのです。
-各プロパティの出力値が同じになるのはこういうことになります。
+例えば、一つのコップをAさんBさんが同時に手にもっているとします。
+コップには水が入っています。
+Bさんが、コップの水を捨て、お茶に置き換えれば、コップの中身は変わっても
+コップ自体は変わらないのと同じです。
+（二人の人間が手に持ちながら、中身を入れ直す絵面は、想像すると微妙ですが）

配列のインデックスが間違っていたため修正※他軽微な修正

2019/10/28 01:43

投稿

miyabi_pudding

スコア9555

test CHANGED Viewed

@@ -66,7 +66,7 @@
 let b = a; // 変数bは、値10への参照になる。aもbも10という値を参照している状態
-b = 100; // 値100が新たに生成され、bはその値への参照となる。この時点で、aとは独立する（aは値10への参照を失わない）
+b = 100; // 値100が新たに生成され、bはその値への参照となる。aとは独立している（aは値10への参照を失わない）
 console.log(a); // 10
@@ -156,7 +156,7 @@
 console.log(a[0]); // ひこざぶろう
-console.log(b[1]); // ひこざぶろう
+console.log(b[0]); // ひこざぶろう
 ```

指摘を受け、全面的に修正

2019/10/28 01:14

投稿

miyabi_pudding

スコア9555

test CHANGED Viewed

@@ -1,8 +1,6 @@
-本質問は、よく話に聞く、**値渡し**なのか、**参照渡し**なのか、ということが関係してきます。
+本質問は、JavaScriptにおける、値の扱いの仕様、
-ただし、JavaScriptにおいては、仕様が違うため、
-C#で言う、**値渡し**、**参照渡し**、の**ようなもの**のようです。
+**値の参照の置き換え**が関係していきます。
@@ -18,17 +16,25 @@
-記事の通り、JavaScriptでは、**値の参照の置き換え**と言うのが表現として正しいように思いますが、
-わかりやすく伝えるために、ここでは、**値渡し**と、**参照渡し**という言葉を使って、説明していきます。
+まず、プリミティブな値（数値や文字列など）が基本とすると理解できる、かと思いますので、その解説から。
-（後半で、JavaScriptは値渡し、参照渡しとは言えない旨も説明します）
-まず下記でよくみるのは、変数の中身が置き換わっているので、
+```javascript
+let a = 10; // 値10が生成され、aは、10という値への参照となる。
+console.log(a) // 10
+```
+基本、変数は、メモリに格納された値の参照であり、**変数自体には値が入っていない**ということです。
-値渡しとなるパターンです。
+では、変数に変数を代入した時はどうなるかというと、
@@ -36,87 +42,21 @@
 let a = 10;
-let b = a;
+let b = a; // 変数bは、値10への参照になる。aもbも10という値を"参照"している状態
-b = 25;
 console.log(a) // 10
-console.log(b) // 25
+console.log(b) // 10
 ```
-これは、たとえ、bにaを代入したとしても、
+となります。
-プリミティブな値のため、値渡しとなるため、
+ですが、プリミティブな値の場合、bを変更しても、a自体はなんら変化がありません。
-bを代入し直したとしても、aの値にはなんら影響がありません。
-しかし、オブジェクトのプロパティの場合は異なってきます。
-```javascript
-const a = { key: 25, value: 15};
-const b = a;
+それはなぜかというと、
-b.value = 35;
-console.log(a.value) // 35
-console.log(b.value) // 35
-```
-これは、bにaを代入した際、bはaへの参照を代入されただけであって、
-bとaは不可分の関係となるため、bの値を変更すると、aの値も変わってしまうわけです。
-これが、**参照渡し**となります。
-JavaScriptにおいては、オブジェクト、配列などが、代入の際、参照渡しとなるため、
-今回の質問のように、**代入先の変数の値を変更すると、
-元の変数の値も変更されてしまう**のです。
-動きというか、見た目の挙動の話は以上です。
-ここからは、参考記事にもある通り、
-JavaScriptは、**値渡し**、**参照渡し**とは言えない所以を解説していきます。
-まず、値渡しとは、変数に値自体が格納されている、代入の際も値自体を渡しているので言えることなのですが、
-JavaScriptは仕様が違っており、
-**変数自体に値が入ることがそもそもありません**。
-```javascript
-let a = 10; // この時点で、値10が生成され、aには、10という値への参照が渡される
-```
-となり、もともとが**値への参照渡し**となります。
-そして、変数から変数にプリミティブな値を代入した際どうなるかというと、
@@ -124,31 +64,9 @@
 let a = 10;
-let b = a; // 値10への参照が渡されるため、aもbも同じ値を"参照"している状態
+let b = a; // 変数bは、値10への参照になる。aもbも10という値を参照している状態
-```
-となります。
-つまりC#でいう**参照渡し状態**と言えます。
-ではなぜ、プリミティブな値の場合、aとbは独立するのか。
-それは下記のような状態になるからです。
-```javascript
-let a = 10;
-let b = a; // 値10への参照が渡されるため、aもbも同じ値を"参照"している状態
-b = 100; // 値100が新たに生成され、その値への参照がbに格納される。この時点で、aとは独立する（aは値10への参照を失わない）
+b = 100; // 値100が新たに生成され、bはその値への参照となる。この時点で、aとは独立する（aは値10への参照を失わない）
 console.log(a); // 10
@@ -158,54 +76,100 @@
-ということが起きるからです。
-つまり値渡しではなく、**値への参照の置き換え**となります。
+となり、ようは、**参照の置き換え**が発生します。
-では、オブジェクトの場合どうなるか。
+では、本質問のようなことがなぜ起こるのか。
+配列やオブジェクトではそもそも参照している段階が違うと言いますか、
+プリミティブなものとは、参照の段階が違うからです。
+※今回の質問は配列ですが、オブジェクトの方が説明がしやすいので、オブジェクトで解説していきます。
 ```javascript
-const a = { val: 10 };
-const b = a;
-a.val = 100;
-console.log(b); // { val: 100 }
+const a = {key: 0, value: 15}; // aは{}の参照となる。そして、各プロパティは、各値の参照となる
 ```
+という状態になり、a自体は、{}というオブジェクト自体の参照となります。
-これはすみません、記事をそのまま引用させていただきます。
+そして、各プロパティは、各値の参照となります。
+よって、このオブジェクト参照の変数を、他の変数に代入するとどうなるか。
+```javascript
+const a = {key: 0, value: 15}; // aは{}の参照となる。そして、各プロパティは、各値の参照となる
+const b = a; // bは{key,value}というオブジェクト自体の参照となる
-> 代入している対象は変数自体ではなく、その変数が持っている(参照の先にある)オブジェクトのプロパティです。つまり、「変数に値を再代入すると"値の参照"が置き換わる」が当てはまらず、２つの変数が同じオブジェクトを指しているままになり、ただ同じオブジェクトを操作してるだけになります。（プリミティブ値はプロパティ代入できないので逆のことはできないのですが）
+b.value = 35; // {key,value}というオブジェクトの、valueの値の参照が置き換わる。そのため、a、b自体の参照は置き換わらない
+// よって、下記のような結果となる
+console.log(a.value); // 35
+console.log(b.value); // 35
+```
+つまり、オブジェクトのプロパティに代入し直すと、
+そのプロパティ自体の値の参照が置き換わるが、
+オブジェクト自体への参照が置き換わるわけではないため、
+a、b自体はなんら変わるわけではないわけです。
-> それから変数自体に値を代入すれば「変数に値を再代入すると"値の参照"が置き換わる」が当てはまるので、もちろん値は変わりません。
+（注意が必要なのは、同じ、`{key, value}`というオブジェクトを参照しているため。一見、aとbは不可分に見えるが、本質的には、代入した時点でaとbは独立している。）
+各プロパティの出力値が同じになるのはこういうことになります。
-となります。
+これは、配列においても同じことがいえます。
-私自身、ECMAScriptの仕様書を読んだわけでは無いのですが、
+（というかJavaScriptにおいては配列もオブジェクト）
-JavaScriptは他の言語とは違う面をみたり、実際に挙動を確認した限りでは、
-今回参考に挙げた記事が正しいのではないかな、と思います。
+```javascript
+const a = ['まさひこ', 'たかひこ']; // aは[0, 1]の参照となる。そして、要素（インデックス）は、各値の参照となる
-また、もともとが、HTMLに対してアクションを起こすものから始まった関係上、このような仕様になっていったのではないかな、と思います。
+const b = a; // bは[0, 1]という配列自体の参照となる
+b[0] = 'ひこざぶろう'; // [0, 1]という配列の、0インデックスの値の参照が置き換わる。そのため、a、b自体の参照は置き換わらない
+// よって、下記のような結果となる
+console.log(a[0]); // ひこざぶろう
+console.log(b[1]); // ひこざぶろう
+```
-長文失礼しました。
+よって、今回の配列のような参照元の配列の値の参照が置き換わるので、今回の質問のような結果となります。
+前回答状態では、誤解と、間違った回答となっていたため、
+大変に失礼しました。
-間違っていたら、どうかご指摘いただければ幸いです。
+また、間違っている部分があれば、ご指摘いただければ幸いです。

JavaScriptがなぜこのような仕様になったかの解説を少々追加

2019/10/28 01:07

投稿

miyabi_pudding

スコア9555

test CHANGED Viewed

@@ -80,9 +80,9 @@
 JavaScriptにおいては、オブジェクト、配列などが、代入の際、参照渡しとなるため、
-今回の質問のように、代入先の変数の値を変更すると、
+今回の質問のように、**代入先の変数の値を変更すると、
-元の変数の値も変更されてしまうのです。
+元の変数の値も変更されてしまう**のです。
@@ -150,6 +150,10 @@
 b = 100; // 値100が新たに生成され、その値への参照がbに格納される。この時点で、aとは独立する（aは値10への参照を失わない）
+console.log(a); // 10
+console.log(b); // 100
 ```
@@ -198,6 +202,10 @@
+また、もともとが、HTMLに対してアクションを起こすものから始まった関係上、このような仕様になっていったのではないかな、と思います。
 長文失礼しました。
 間違っていたら、どうかご指摘いただければ幸いです。