Console.log Is Lying to You: debugging traps and tricks
console.log() は参照（オブジェクトや配列）を渡した場合、展開時点の値ではなく、コンソールで確認した時点の最新の値を表示することがあります。この非同期な挙動が原因で、デバッグ中に誤った前提でコードを追ってしまう落とし穴にハマらないよう、JSON.stringify やスプレッド構文を使ったスナップショット取得のテクニックを紹介します。
背景メモ
- JavaScriptの`console.log`は、オブジェクトや配列をログ出力するとき「その時点」の値を表示するのではなく、**参照を保持**し、後からコンソールで展開した時点の最新状態を表示する仕様。これにより、ループ内や非同期処理のデバッグで「なぜか値が変わっている」という混乱が起きる。
- 同様の落とし穴として、`console.log`がオブジェクトのgetterを誤って呼び出して副作用を起こすケース（例：ログ出力だけで状態が変わる）、ブラウザのコンソールが勝手にスタックトレースを付与してパフォーマンスを劣化させるケースなどがある。
- 著者のGabor K oos（Gábor Köős）はハンガリー出身のシニアソフトウェアエンジニア。TypeScriptやReact、分散システムについての技術ブログを公開している。
- この記事は、普段何気なく使っている`console.log`が「嘘をつく」例と、それを避けるために`JSON.parse(JSON.stringify(obj))`でスナップショットを取る、`console.assert`や`console.table`を活用する、などのテクニックをまとめた実践的なデバッグガイド。