jQueryで、下の処理が実行された値が、上の処理に反映してしまう問題について

Question

前提・実現したいこと

jQueryで、配列を更新する作業に取り組んでいます。

該当のソースコードで、ajax()の中にあるarrNewをコンソールに出すときに、[3]だけを表示したいです。

発生している問題・エラーメッセージ

ajax()の中にあるarrNewをご覧ください。

この行はupdate()より上なのに、update()によってmergeが実行されて[3,2,1]になってしまうのが問題です。

ここはupdate()実行前の値として、[3]が取得されるハズではないのでしょうか？

エラーはありません

該当のソースコード

sample : https://jsfiddle.net/z57m8xpk/

function get(){
	var arr = [2,1];
	console.log('get() - arr : ', arr );
	return arr;
}

function ajax(){
	var responce = '[3]';
	console.log('ajax() - responce', responce );
	const arrNew = JSON.parse( responce );
	console.log('ajax() - arrNew【問題の値】 :', arrNew ); // [3]のハズでは？
	update( 'merge', arrNew );
}
ajax();

function update( way, arrNew ){

	// 現状のデータ
	let arr = get();
	arr = (arr) ? arr : [];
	console.log('update() - data : ', arr );

	// 追加
	if( way=='unshift' ){
		arr.concat( arr.unshift(arrNew) );
		console.log('update() - unshift - data : ', arr );
	}

	// 削除
	else if( way=='shift' ){
		arr.concat( arr.shift(arrNew) );
		console.log('update() - shift - data : ', arr );
	}

	// 上に追加
	else if( way=='merge' ){	
		console.log('update() - merge - data : ', $.merge( arrNew, arr ) );
	}

}

試したこと

update()をコメントアウトすれば[3]が取得されます。

補足情報（FW/ツールのバージョンなど）

各ブラウザで同じ問題が生じます。

Comments

[querykuma]

[3,2,1]になってしまうとおっしゃっているのはデベロッパーツールですか？

Answer 1

ここはupdate()実行前の値として、[3]が取得されるハズではないのでしょうか？

[3]が取得されています。配列以外に変換してから表示すればわかります。

[3,2,1]が取得されるとおっしゃっているのはデベロッパーツールのConsoleの表示ですか？

iの箇所に表示される「Value below was evaluated just now.」は「以下の値は、たった今評価されました」という意味です。
arrNewの三角をクリックして（たった今）arrNewが評価されました。

たった今評価するとupdate()実行後に評価した値の[3,2,1]が表示されます。

Comments

[natsunoomoide]

ありがとうございます。知りませんでした。当時の値を見たいのに更新されてしまうとは、不便に感じませんか？なぜそんな仕様に…