DEV Community

Stephen Charles Weiss
Stephen Charles Weiss

Posted on • Originally published at stephencharlesweiss.com on

2 2

Optional Params with JSON Stringify

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 console.log('my var --> ', 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., proposal: standard -->\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"
------]
----}
--]
}

Resources

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
stephencweiss profile image
Stephen Charles Weiss

:) Glad you liked it! If you're working browser-side, I highly recommend the object notation, console.log({ myObj }) is so much easier to reason through than console.log('myObj --> ', myObj) :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more