Logging an Object

• javascript

When I log a JavaScript value in the console, I generally use an object literal. It’s a little thing with a big cumulative benefit.

console.log({ response })

In this post, I’ll explain this technique and describe why I find it useful.

Logging an Object

When logging a response value in the console, one might write this:

console.log(response)

The downside here is the value is printed raw into the console, be it an empty string, null, or undefined. That can be hard to find in a noisy console. With multiple logs printing in the same debugging session, we’re pretty much guessing which is which.

Another technique is:

console.log("The response is: ", response)

This prints “The response is: ” and the response. Easier to find and read, but you have to type this every time or use some kind of mapping.

Here’s my choice:

console.log({ response })

This wins because it prints an object with the key response and the value of response:

// Sample outputs
{ response: "hello" }
{ response: undefined }
{ response: { status: 'ok' } }

It’s fast to write and readable. Typing ‘response’ into your browser console’s search bar filters out everything but your log.

Try it the next time you’re debugging.

Blog of Jake Worth, software engineer in Maine.