配列、オブジェクトなどのconsole.log出力値がおかしい。(短いコードです)

Question

私の予想では下記のコードではconsole.logの値は0になるとおもったのですが。実際は1でした。これはなぜですか？

    var a=[{"y":0}]
    var ｂ=a;
    b[0].y=1;
    console.log(a[0].y);//0ではなく1と出力される

この現象は下記のコードでもおきます

    var a={"y":0}
    var ｂ=a;
    b.y=1;
    console.log(a.y);//0ではなく1と出力される

    var a=[0]
    var ｂ=a;
    b[0]=1;
    console.log(a[0]);//0ではなく1と出力される

Comments

[yambejp]

とりあえず全角の「ｂ」はわざとでないなら半角に書き換えて下さい

Answer 1

JavaScriptでは、配列を含めたオブジェクトの代入は、コピーではなく、同じオブジェクトを共有する形となります。

オブジェクトをコピーしたい場合には、配列であれば[...arr]や.concat()を使う、ObjectであればObject.assign（IE11は未対応）を使う、どちらの場合でもいったんJSON化してから戻す、などの方法があります。

Answer 2

まずはこのコードを見てください。

var a = [100];
var b = a;
console.log(a === b); // true <- わかる
console.log(a === [100]); // false <- !?!?!?

JavaScriptの世界ではArrayやObject等は生成時に唯一の目に見えないID(以下ユニークID)が与えられます。
ユニークIDの実体はオブジェクトが格納されているメモリ空間上のアドレスです。
var a = [100]には配列の実体そのものではなく、メモリ空間上のアドレス、つまりユニークIDという特殊な数値が代入されています。

[100] === [100]は[100]という配列を2個生成して、それぞれにユニークIDを割り振ります。
オブジェクト同士の比較演算では、このユニークID同士のみを比較します。
ユニークID以外は完全に一致する2つの[100]ですが、ユニークIDが異なる為にfalseになるのです。

※ユニークIDと連呼していますが、これは説明し易いから呼んでいるだけで正式な名称ではありません。この回答文以外ではメモリ空間のアドレス等の名称で呼んで下さい。

---

この現象は配列やオブジェクト操作の時にも影響されます。

var a = [1];
var b = [1];
a[0] = 2;
console.log(a, b); // [2], [1] <- わかる

var c = b;
c[0] = 3;
console.log(a, b, c); // [2], [3], [3] <- !?!?!?

配列やオブジェクトの値を操作する場合、ユニークIDに従ってメモリ空間上にある値を直接更新します。
その結果、上記のコードではc[0]の変更の影響がb[0]に出ています。

ちなみにaとbは別々に配列を作っていますので相互不干渉です。

---

この仕様、一部のケースではとても困ります。

• 失敗したら変更操作を取り消したい
• 変更前後で比較検証したい

配列やオブジェクトのプロパティを操作したら本物に影響が出てしまうわけですからね。
そこで、全くのクローンを生成する手法が用意されていたり、編み出されています。

分かりやすい簡単なコードはこれです。

var a = [1, 2, 3, 4, 5];
var b = [];
for (var i = 0; i < a.length; i++) {
  b.push(a[i]);
}

b[0] = 10;
console.log(a, b); // [1, 2, 3, 4, 5], [10, 2, 3, 4, 5]

aとbは別々の配列を作る宣言をしていますので、ユニークIDは別個です。
その後a配列の要素を一つずつbにコピーしていますが、
aとbは既に切り離されていますし、a配列の要素は全て数値なのでユニークIDのコピーは発生しません。

bはaのクローンを作る事に成功したのです。
従って、a配列には影響を与えずにb[0] = 10と意図通りの操作を行う事に成功しています。

この手法は「シャローコピー」、「ディープコピー」、「クローン」などといった用語で説明されています。
もし必要になった際には、これらのワードで検索を掛けてみてください。

Answer 3

余談ですが、

var ｂ=a; // ｂは全角文字
b.y=1; // bは半角文字。上のｂとは別の変数

Comments

[maisumakun]

JavaScriptの場合、識別子として使える文字はUnicodeの文字プロパティで定義してあるので、何がOKなのかわかりづらいですね…

RubyやPHP（UTF-8のソースコード）の場合、ASCII外の文字はすべて識別子の一部にできます。

Answer 4

// この１行を追加して考えてください。やっていることは変わりません。
var c = {"y":0}; 
var a = [c];
var b = a;
b[0].y=1;
// b[0] は c なので、これは、c.y = 1 と同じです。これで、c.y が 1 になりました。
console.log(a[0].y);
// a[0] は c なので、c.y つまり 1 が出力されます。