Cover image for The secret power of JSON stringify

The secret power of JSON stringify

blacksonic profile image Gábor Soós ・2 min read

There are many functions in Javascript that do their job. We use them daily, but we don't know about their extra features. At one day, we look at its documentation and realize it has many more features then we have imagined. The same thing has happened with JSON.stringify and me. In this short tutorial, I'll show you what I've learned.


The JSON.stringify method takes a variable and transforms it into its JSON representation.

const firstItem = { 
  title: 'Transformers', 
  year: 2007 

// {'title':'Transformers','year':2007}

The problem comes when there is an element that can not serialize to JSON.

const secondItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]) 

// {'title':'Transformers','year':2007,'starring':{}}

The second argument

JSON.stringify has a second argument, which is called the replacer argument.

You can pass an array of strings that act as a whitelist for properties of the object to be included.

JSON.stringify(secondItem, ['title']);
// {'title':'Transformers'}

We can filter out values that we don't want to display. These values can be too large items (like an Error object) or something that doesn't have a readable JSON representation.

The replacer argument can also be a function. This function receives the actual key and value on which the JSON.stringify method is iterating. You can alter the representation of the value with the function's return value. If you don't return anything from this function or return undefined, that item will not be present in the result.

JSON.stringify(secondItem, (key, value) => {
  if (value instanceof Set) {
    return [...value.values()];
  return value;
// {'title':'Transformers','year':2007,'starring':['Shia LaBeouf','Megan Fox']}

By returning undefined in the function, we can remove those items from the result.

JSON.stringify(secondItem, (key, value) => {
  if (typeof value === 'string') {
    return undefined;
  return value;
// {"year":2007,"starring":{}}

Third argument

The third argument controls the spacing in the final string. If the argument is a number, each level in the stringification will be indented with this number of space characters.

JSON.stringify(secondItem, null, 2);
//  "title": "Transformers",
//  "year": 2007,
//  "starring": {}

If the third argument is a string, it will be used instead of the space character.

JSON.stringify(secondItem, null, '🦄');
//🦄"title": "Transformers",
//🦄"year": 2007,
//🦄"starring": {}

The toJSON method

If the object what we stringify has a property toJSON, it will customize the stringification process. Instead of serializing the object, you can return a new value from the method, and this value will be serialized instead of the original object.

const thirdItem = { 
  title: 'Transformers', 
  year: 2007, 
  starring: new Map([[0, 'Shia LaBeouf'],[1, 'Megan Fox']]),
  toJSON() {
    return { 
      name: `${this.title} (${this.year})`, 
      actors: [...this.starring.values()] 

// {"name":"Transformers (2007)","actors":["Shia LaBeouf","Megan Fox"]}

Demo time

Here is a Codepen where I included the above examples, and you can fiddle with it.

Final thoughts

It can be rewarding sometimes to look at the documentation of those functions we use daily. They might surprise us, and we learn something.
Stay hungry for knowledge and read the documentation 🦄.

Posted on by:

blacksonic profile

Gábor Soós


Enthusiastic full-stack JavaScript developer/lead, tech writer, speaker at Emarsys


markdown guide

Regarding the second items white list (array) argument:
We can use it to create a simple object hashing function (similar to object-hash, but with limitation of maximum object depth 1). The important thing is, JSON.stringify(obj) may not follow property order, which matters when the serialization is input for hashing/checksum. Instead we can pass Object.keys(obj).sort() as the 2nd argument, and the JSON will be stringified in that property order only.

function objectHash(obj: object): string {
  const str = JSON.stringify(obj, Object.keys(obj).sort());
  return createHash('sha1').update(str).digest('hex');

View code snippet for client-side at GitHub
View code snippet for Node.js at GitHub and tests


This is kind of horrifying and I love it.


Wow, didn't know it. Nice snippet! I always learn something new.


Nice to know. However, being a java developer, this brings me to think that this should be a built-in functionality. Doesn't plain JS have hashing function for all it's objects?


No. JS doesn't expose any hashing function for any of its supported types.


Wow! I'm a big fan of writing applications with JavaScript and its wide-varieties of libraries. I also don't post at all, ever, on any social platforms.

But this post is the first time that made we want to login and comment something.

Thanks for this amazing post! It's amazing that these simple methods are overlooked by many developers. Learning about this just now is the reason why I love programming.


Comments like this keep me motivated to keep on writing 👍 Thanks


Great post, I use JSON.stringify all the time and I never new about this 😳love finding out about these nooks and crannies of JS.


Glad it showed something new 👍


I've been using JavaScript deeply for a long time and it's very rare that I learn something new about old parts of JavaScript, but you've taught me two new things! I knew about the replacer function, I knew about the indentation, I even knew about toJSON, but I had never heard of either the property whitelist array or the indentation string options before! Thanks for the knowledge! 👏👏👏


I have used the indentation for a long time, but that null value before it always bothered me 😀


Excellent article, I've never looked into the other arguments and the toJSON functionality is especially brilliant. Thanks for sharing!


toJSON was also absolutely new for me also


I am especially excited to be able to prefix my stringified objects with a unicorn!! 🦄🦄🦄

Seriously though, great article - every time I typed that null I wondered what that second argument was for and never got around to looking...



Thanks, unicorn all the way!!! 🦄🦄🦄


Thank you, I learned some useful tips reading your article :)


Thanks for the detailed sharing. Nice reading. It turned me very hunger for Java Script knowledge.


Thank you so much! Thanks to people like you we learn something new every day :)


Well done! Didn't know about those other arguments. The toJSON method is an interesting capability too. Thanks!


Thanks, yes indeed a real game changer


I've been using stringify for years and had no idea how powerful it is. Great article. Thanks.


Ha! The method looks so simple that I never even thought of reading MDN on it :) Thank you man for pointing us out to these awesome features. toJSON is the most promising part, I believe.


Awesome article, I think so these kinds of tools are using the same functions. codebeautify.org/jsonviewer and jsonformatter.org/json-parser