JavaScriptの変数の性質について分からないことがあります

Question

疑問点

以下のようなJavaScriptコードを動作させました。

function test_func1(x){
    x[0] += 1;
    return x;
}

function test_func2(x){
    x[0].melon += 1;
    return x;
}

function test_print(){
    let a = [0, 1];
    let b = [{melon:0, apple:0}, {melon:0, apple:1}];
    console.log(a); // [0, 1]が出力される
    console.log(b); // [{melon:1, apple:0}, {melon:0, apple:1}]が出力される（なぜ？）
    a = test_func1(a);
    b = test_func2(b);
    console.log(a); // [1, 1]が出力される
    console.log(b); // [{melon:1, apple:0}, {melon:0, apple:1}]が出力される
}

test_print();

関数test_func2を通過した後の**console.log(b)のmelonが1になるのは分かるのですが、なぜ関数を通過する前のconsole.log(b)**のmelonまでもが1になるのか、お教えいただけると幸いです。

実行環境

Microsoft Edge 開発者ツール内のコンソール（バージョン 96.0.1054.34）

（環境によっては理想通りに出力されるようなのですが、上記環境では疑問点のような出力が行われてしまいました。Chromeでも同様です。）

Comments

[itagagaki]

提示のコードをコピペして実行した結果は以下の通りです。
[ 0, 1 ]
[ { melon: 0, apple: 0 }, { melon: 0, apple: 1 } ]
[ 1, 1 ]
[ { melon: 1, apple: 0 }, { melon: 0, apple: 1 } ]

[m.ts10806]

再現しませんでした
https://paiza.io/projects/XqhDcyATZhm3ToF4nfs9wg

Answer 1

なぜ関数を通過する前のconsole.log(b)のmelonまでもが1になるのか

それは変数の問題ではなくて、console.logの問題という可能性もあります。

環境によっては、console.logでオブジェクトを見ると、詳細を展開した瞬間の情報をとってくることがあります。

Answer 2

デバッガが参照するオブジェクトが更新されたオブジェクトを表示しているからでしょう

console.log(b);
↓↓↓
console.log(JSON.stringify(b));

とすると、consoleしている時点ではちゃんと更新前のデータになっていることが確認できます

Comments

[Bell.T]

ご回答いただいた旨を考慮して出力したところ、理想通りに出力されました。やはりデバッガーの特性だったのですね…。
ご回答いただきありがとうございます！