console.log すると Array や Object になってしまう！

階層が深いオブジェクトを console.log で出力すると、深い箇所が Array や Object みたいな感じになって見れないなんてことありますよね？

私はあります。そして困っていました。

が、解決策もよくわからず、Array や Object になっている階層のオブジェクトを console.log の引数に入れるみたいなパワープレイをしていました。

例： console.log(foo.bar[0].baz);

みんなそうしていますよね？そうするしかないと思っていました。

解決策: console.dir もしくは JSON.stringify を使う

console.dir(foo, { depth: null });

みたいに指定することで、深い階層も出力することができます。

depthには数字を指定することも可能です。指定した数字の階層まで出力してくれます。

null だと全部出力です。

詳しくはMDNを

console.log(JSON.stringify(foo, null, 2));

みたいな感じで使います。

ログに出力したいだけであれば第二引数はnullでいいでしょう。

第三引数はインデントのスペースの数を指定しています。

こちらも詳しくはMDNを

もっと早く知りたかった、！

JSON.stringify も存在は知っていて使ったりしていましたが、まさか Array や Object になってしまう問題にも使えるとは、、

でもこれからはconsole.log(foo.bar[0].baz); みたいなことをしなくていいのでよかったです。

参考になれば幸いです。