console.log()でオブジェクトの階層が深い場合に[Object]となる場合の対処法
console.log()でオブジェクトを表示すると、ある程度の階層までは表示されるのですが、深すぎると[Object]となってしまい、表示されなくなってしまいます。
const obj = { a: { b: { c: { d: {} } } } } | |
console.log(JSON.stringify(obj)) // { a: { b: { c: [Object] } } }と表示される |
これを表示するにはJSON.stringify()を使用します。
const log = { a: { b: { c: { d: {} } } } } | |
console.log(JSON.stringify(log)) // {"a":{"b":{"c":{"d":{}}}}}と表示される |
JSON.stringify()の第三引数
JSON.stringifyには引数が3つあって、3つ目に数値で「2」と指定すると整形されます。インデントが2となります。文字列で\tと指定するとタブとなります。
const log = { a: { b: { c: { d: {} } } } } | |
console.log(JSON.stringify(log, null, 2)) | |
/* | |
↓こんな感じで表示されます | |
{ | |
"a": { | |
"b": { | |
"c": { | |
"d": {} | |
} | |
} | |
} | |
} | |
*/ | |
console.log(JSON.stringify(log, null, '\t')) | |
/* | |
↓こんな感じで表示されます | |
{ | |
"a": { | |
"b": { | |
"c": { | |
"d": {} | |
} | |
} | |
} | |
} | |
*/ |
JSON.stringify()の第二引数
第二引数では第一引数のオブジェクトのキーを文字列の配列で指定します。
第二引数で指定されたkey-valueのみ表示されるようになります。
console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, ['a'])) // {"a":5}と表示される |
ちょっと難しい使い方として、replacerというコールバック関数を指定します。
ユースケースがあまり思いつきませんが、JSのErrorオブジェクトをconsole.logで表示したい場合はこのreplacerを使えばエラー内容を表示することができます。
コールバック関数の第一引数はオブジェクトのkey,第二引数はオブジェクトのvalueとなります。以下はErrorオブジェクトの場合の出力例です。
const err = new Error('error message') | |
console.log( | |
JSON.stringify(err, function(key, val) { | |
return JSON.stringify(val, Object.getOwnPropertyNames(val)) // Errorオブジェクトの場合、keyが''となる | |
}) | |
) |
valueが関数の場合、key-valueが消える
オブジェクトの値が関数の場合、そのキーごと消えてしまいます。
const log = { a: { b: { c: { d:function(){return 1;}} } } } | |
console.log(JSON.stringify(log)) // { a: { b: { c: {} } } }と表示されてしまう |
util.inspectを使う
nodeのバージョン9くらいからutil.inspectでオブジェクトを文字列化してくれます。
depth:nullオプションを指定することで、階層が深くてもvalueが関数であっても表示されるようになります。
const util = require('util') | |
console.log(util.inspect({a:{b:{c:{d:{e:{f:(ret)=> ret}}}}}}, {depth: null})) |
「Node.jsでutil.debuglogを使用してログ出力する方法」info, warnを使えばもっと便利です。
info(util.inspect({a:{b:{c:{d:{e:{f:(ret)=> ret}}}}}}, {depth: null})) |
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^