回答編集履歴

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

2019/10/28 01:43

投稿

miyabi_pudding

スコア9567

answer CHANGED Viewed

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

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

2019/10/28 01:43

投稿

miyabi_pudding

スコア9567

answer CHANGED Viewed

@@ -32,7 +32,7 @@
 ```javascript
 let a = 10;
 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
 console.log(b); // 100
 ```
@@ -77,7 +77,7 @@
 b[0] = 'ひこざぶろう'; // [0, 1]という配列の、0インデックスの値の参照が置き換わる。そのため、a、b自体の参照は置き換わらない
 // よって、下記のような結果となる
 console.log(a[0]); // ひこざぶろう
-console.log(b[1]); // ひこざぶろう
+console.log(b[0]); // ひこざぶろう
 ```
 よって、今回の配列のような参照元の配列の値の参照が置き換わるので、今回の質問のような結果となります。

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

2019/10/28 01:14

投稿

miyabi_pudding

スコア9567

answer CHANGED Viewed

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

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

2019/10/28 01:07

投稿

miyabi_pudding

スコア9567

answer CHANGED Viewed

@@ -39,8 +39,8 @@
 bとaは不可分の関係となるため、bの値を変更すると、aの値も変わってしまうわけです。
 これが、**参照渡し**となります。
 JavaScriptにおいては、オブジェクト、配列などが、代入の際、参照渡しとなるため、
-今回の質問のように、代入先の変数の値を変更すると、
+今回の質問のように、**代入先の変数の値を変更すると、
-元の変数の値も変更されてしまうのです。
+元の変数の値も変更されてしまう**のです。
 動きというか、見た目の挙動の話は以上です。
@@ -74,6 +74,8 @@
 let a = 10;
 let b = a; // 値10への参照が渡されるため、aもbも同じ値を"参照"している状態
 b = 100; // 値100が新たに生成され、その値への参照がbに格納される。この時点で、aとは独立する（aは値10への参照を失わない）
+console.log(a); // 10
+console.log(b); // 100
 ```
 ということが起きるからです。
@@ -98,5 +100,7 @@
 JavaScriptは他の言語とは違う面をみたり、実際に挙動を確認した限りでは、
 今回参考に挙げた記事が正しいのではないかな、と思います。
+また、もともとが、HTMLに対してアクションを起こすものから始まった関係上、このような仕様になっていったのではないかな、と思います。
 長文失礼しました。
 間違っていたら、どうかご指摘いただければ幸いです。