console.log()でオブジェクトの階層が深い場合に[Object]となる場合の対処法
console.log()でオブジェクトを表示すると、ある程度の階層までは表示されるのですが、深すぎると[Object]となってしまい、表示されなくなってしまいます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const obj = { a: { b: { c: { d: {} } } } } | |
console.log(JSON.stringify(obj)) // { a: { b: { c: [Object] } } }と表示される |
これを表示するにはJSON.stringify()を使用します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const log = { a: { b: { c: { d: {} } } } } | |
console.log(JSON.stringify(log)) // {"a":{"b":{"c":{"d":{}}}}}と表示される |
JSON.stringify()の第三引数
JSON.stringifyには引数が3つあって、3つ目に数値で「2」と指定すると整形されます。インデントが2となります。文字列で\tと指定するとタブとなります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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のみ表示されるようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, ['a'])) // {"a":5}と表示される |
ちょっと難しい使い方として、replacerというコールバック関数を指定します。
ユースケースがあまり思いつきませんが、JSのErrorオブジェクトをconsole.logで表示したい場合はこのreplacerを使えばエラー内容を表示することができます。
コールバック関数の第一引数はオブジェクトのkey,第二引数はオブジェクトのvalueとなります。以下はErrorオブジェクトの場合の出力例です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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が消える
オブジェクトの値が関数の場合、そのキーごと消えてしまいます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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が関数であっても表示されるようになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const util = require('util') | |
console.log(util.inspect({a:{b:{c:{d:{e:{f:(ret)=> ret}}}}}}, {depth: null})) |
「Node.jsでutil.debuglogを使用してログ出力する方法」info, warnを使えばもっと便利です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
info(util.inspect({a:{b:{c:{d:{e:{f:(ret)=> ret}}}}}}, {depth: null})) |

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格:少額短期保険募集人,FP3級