/
/
What Developers Should Know About JSON.stringify()
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

What Developers Should Know About JSON.stringify()

This blog post will explore the inner workings of JSON.stringify(), a function used to turn any JavaScript object into a string. This can be useful for debugging or simply getting information about an object in your code without typing it all out. It’s also quite handy when you want to store data on the client-side of a web app and need something more compact than form fields for every piece of data you want to send back and forth between server and browser!

👇 The JSON.stringify() – Takes 3 Arguments 👇

1) The First Argument is the “value”

The first argument of the method converts a JS object or value to a JSON string.

// ⚡️ The First Argument ⚡️
const protein = {
    hamburger: '🍔',
    steak: '🥩',
    pizaa: '🍕'
};

console.log(JSON.stringify(protein)); // {"hamburger":"🍔", "steak":"🥩", "pizaa":"🍕"}

2) The 2nd argument is called the “replacer”.

⚡️ It Takes 2 Types Of Arguments: Array and Function ⚡️

If the argument is an Array – key/s passed in the array is used to pick the key-value pair you want to output.

//⚡️ The Second (Replacer) Argument - Array  ⚡️
const protein = {
    hamburger: '🍔',
    steak: '🥩',
    pizaa: '🍕'
};

console.log(JSON.stringify(protein, ['hamburger', 'steak'])); // {"hamburger":"🍔", "steak":"🥩"}

If the argument is a Function – you can loop over each item and, with each pass, manipulate with the logic defined in your function.

// ⚡ ️The Second (Replacer) Argument - Function ⚡️
const protein = {
    hamburger: '🍔',
    steak: '🥩',
    pizaa: '🍕'
};

console.log(
    JSON.stringify(protein, (key, value) => {
        if (typeof value === 'string') {
            return value + '!';
        }
        return value;
    })
); //  {"hamburger":"🍔!", "steak":"🥩!", "pizaa":"🍕!"}

3) The 3nd argument – controls the spacing in the final string.

⚡️ It Takes 2 Types Of Arguments: String and Number ⚡️

If the argument is a Number – each level in the stringification will be indented with this number of space characters.

// ⚡️ The Third Argument - With Number ⚡️
const protein = {
    hamburger: '🍔',
    steak: '🥩',
    pizaa: '🍕'
};

// Note: '--' represnts the spacing for understanding purpose.
console.log(JSON.stringify(protein, null, 2)); // {__"hamburger": "🍔", __"steak": "🥩", __"pizaa": "🍕"}

If the third argument is a string – it will be used instead of the space character as displayed above.

// ⚡️ The Third Argument - With String ⚡️
const protein = {
    hamburger: '🍔',
    steak: '🥩',
    pizaa: '🍕'
};

console.log(JSON.stringify(protein, ['hamburger'], 'I 💛')); // {I 💛"hamburger": "🍔"}

Conclusion 📌

JSON.stringify() is a JavaScript method that converts an object into a string, which can then be encoded to disk and sent across the network in response to AJAX requests. This article has shown you how it works behind the scenes and the benefits of using this function for your own projects!

Recent Snippet

How to use reduce over an array of objects

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.

How to get the highest or the lowest value in an array

To get the maximum or the minimum value from an array, we can use Math.max() and pass as arguments the numbers from which we want to pick.