I’ve gotten in the habit recently of printing my variables as object literals. For example, if I have a variable, myVar, that I want to inspect, I’ll print it using console.log({ myVar }).

When working in the browser, this helps in two key ways:

1. It makes it interactive and
2. It names the object (myVar becomes the key of the object), so I can avoid something more verbose like ', myVar).

The terminal, however, does not have these advantages. It is not interactive and so objects will print as [ [Object] [Object] ] and array as [Array].

JSON.Stringify addresses these shortcomings by exposing the details of the objects without relying on interactivity or a manual destructuring.

Let’s look at an example of stringify’ing a proposal. The proposal’s shape will be:

`{
  resourceName: string,
  fields: {
    id: string,
    classes: string[],
  }
}

Note: The console log prefixes (e.g., \n) I’ve added are intended for clarity only - they are optional.

Standard Approach

My preferred approach when printing objects on the front end is to create Objects.

console.log(`proposal: standard -->\n`, { proposal })

This, however, leads to the common problem where Objects are obfuscated.

proposal: standard -->
 { proposal:
   { resourceName: 'Property',
     proposedFields: [ [Object], [Object] ] } }

And since the terminal isn’t interactive, there is no simple recourse… enter JSON.Stringify.

With JSON.Stringify

JSON.stringify efficiently solves this problem of obfuscation.

console.log(`proposal: json -->\n`, JSON.stringify(proposal))

This, however, leaves much to be desired from a readability perspective. Since the entire object is collapsed to a single string, as the object grows in size, this will become unwieldly

proposal: json -->
{"resourceName":"Property","proposedFields":[{"id":"100311","classesEnabled":["RESI"]},{"id":"100820","classesEnabled":["RESI","RLSE"]}]}

With JSON.Stringify and Spacer

Fortunately, tackling legibility is as easy as using the optional spacer parameter that’s part of the JSON.Stringify API. The spacer parameter is in the third position (second position is for an optional replacer function or array) and takes a string or number.

The number refers to the number of leading space characters.

console.log(
  `proposal: json + spacer -->\n`,
  JSON.stringify(proposal, undefined, 4),
)

This prints a readable version with all of the details spelled out.

proposal: json + spacer -->
{
    "resourceName": "Property",
    "proposedFields": [
        {
            "id": "100311",
            "classesEnabled": [
                "RESI"
            ]
        },
        {
            "id": "100820",
            "classesEnabled": [
                "RESI",
                "RLSE"
            ]
        }
    ]
}

String Spacers

Strings do the same thing, however, they can be any string pattern. For example:

console.log(
  `proposal: json + spacer -->\n`,
  JSON.stringify(proposal, undefined, "--"),
)

Becomes :

proposal: json + spacer -->
{
--"resourceName": "Property",
--"proposedFields": [
----{
------"id": "100311",
------"classesEnabled": [
--------"RESI",
--------"RLSE"
------]
----},
----{
------"id": "100820",
------"classesEnabled": [
--------"RESI",
--------"RLSE"
------]
----}
--]
}

Footnotes

• JSON.stringify() | MDN