You log an object in JavaScript… and all you get is [object Object]. Not helpful. Especially when you’re debugging, mid-interview, or just trying to look like you know what you’re doing.
Let’s fix that. I’ll show you how to properly convert any object into a readable string using JSON.stringify, custom formatting, and a few pro-level tricks that’ll save your time (and your sanity).
Key Takeaways
- JSON.stringify helps us turn a JavaScript object into a JSON string, which is useful for sending data or saving it.
- We can use the replacer parameter to choose which properties to include or to change values during conversion.
- The space parameter lets us add spaces or indentation, making the JSON string easier to read.
- If an object contains undefined, function, or symbol values, these will be left out or changed to null in arrays.
- JSON.stringify is the opposite of JSON.parse, which turns a JSON string back into a JavaScript object.
- We can use JSON.stringify to log or debug the state of objects, especially when working with data or user interfaces.
JSON.stringify()
The JSON.stringify() is a static method in JavaScript that converts a JavaScript object into a JSON string. Values can be replaced or filtered if a replacer function is specified to include certain key-value pairs from the object, the process known as serialization.
Databases and other data stores usually don’t have a built-in feature to interpret JavaScript. JSON.stringify() acts as a bridge between JavaScript objects and the data sources that hold them.
Syntax
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
- value: A JavaScript value that is to be converted into JSON String.
- replacer (optional): A function or an array that is used to customize the behaviour of the stringification process.
- space (optional): A whitespace string (or a number) that specifies the indentation level for the output JSON string. It is mostly used to format the output so that it is in readable form. If provided, it must be a string with a maximum of ten spaces or a non-negative number, if it is omitted or null then no whitespace is added which results in a more compact JSON string.
Example 1: Converting Object into a JSON String
Now, let’s take a code snippet and convert an object into a JSON string.
const obj = { name: 'Jai', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
As we can see, the code produces a JSON string representation of the object, basically, it is an object which is represented as a long string.
Example 2: Converting Nested Objects into String
JSON.stringify() is able to handle various types of nested objects and data types seamlessly such as string, numbers, boolean, arrays and nested objects. Look at the below snippet to understand this better:
const nestedObj = {
name: 'Ali',
age: 25,
address: {
city: 'New York',
zip: 10001
}
};
const jsonString = JSON.stringify(nestedObj);
console.log(jsonString);
As we can see from the above snippet, the JSON.stringify() method has completed its successful iteration over the nested objects within ‘nestedObj’ and properly serialized each nesting level.
Customizing Serialization with Arrays
The second parameter of JSON.stringify() is the ‘replacer’ allows us to specify an array of properties that we want to include in the output of the JSON string. This feature is useful when we have an object with multiple attributes, but we only want to include a few of them in the JSON representation.
const person = [{
name: 'Ali',
age: 25,
job: 'Engineer',
salary: 50000
},
{
name: 'Aman',
age: 27,
job: 'Data Engineer',
salary: 50000
}
]
const jsonString = JSON.stringify(person, ['name', 'job']);
console.log(jsonString);
In this example, you can see that we have used the replacer array as we need to modify the object. As a result, the output JSON string contains only the properties that we have specified.
Customizing Serialization with Functions
We can also pass a function as the second parameter, i.e. replacer function, inside the JSON.stringify() method to specify which properties of the input object should be included in the output JSON string.
const person = {
name: 'Alice',
age: 25,
job: 'Engineer',
salary: 50000
};
const jsonString = JSON.stringify(person, (key, value) => {
if (key === 'age') {
return value * 2; // doubling the age
}
return value; // default behavior for other properties
});
console.log(jsonString);
In this example, the replacer function determines if ‘age’ is the property that is serialized and if so, the method adds the age value to the JSON string after doubling it. All other attributes are included by default, and they are not altered.
Common Pitfalls
Missing Unsupported Data Types
Some values like undefined, functions, symbols, and BigInt are left out or cause errors when we use JSON.stringify.
Solution: Remove or convert these values before converting the object.
Example: JSON.stringify({ age: undefined, greet: function() {}, id: 123n }) gives an error or skips properties.
Circular References Cause Errors
If an object refers to itself, JSON.stringify will throw an error and stop the process.
Solution: Use a custom replacer or a library to handle circular references.
Example: const obj = {}; obj.self = obj; will fail with JSON.stringify(obj).
Loss of Non-Stringifiable Properties
Properties with undefined or function values are not included in the result, which can cause missing data.
Solution: Check the output and add needed values in a different way.
Example: JSON.stringify({ name: “Sam”, doWork: function() {} }) gives {“name”:”Sam”}.
Incorrect Use of Replacer
Using the replacer parameter wrongly can filter out important data or make the output confusing.
Solution: Always test the output when using a replacer function or array.
Example: JSON.stringify({ a: 1, b: 2 }, [“a”]) only keeps property a.
Frequently Asked Questions
What is the main purpose of converting an object to a string in JavaScript?
The main purpose is to turn a JavaScript object into a string format so that it can be easily stored, sent to a server, or shared with other systems that do not understand JavaScript objects directly.
Which method is used to convert a JavaScript object into a JSON string?
We use the JSON.stringify method to convert a JavaScript object into a JSON string.
How does JSON.stringify work?
JSON.stringify takes a JavaScript value and returns a string in JSON format, which represents the properties and values of the original object.
Can we use JSON.stringify with arrays?
Yes, JSON.stringify can convert arrays into JSON strings, keeping the order and values of the array elements.
What is a replacer function in JSON.stringify?
A replacer function is an optional argument in JSON.stringify that lets us choose which properties to include or change in the final JSON string.
Why would we want to filter or hide some properties when converting an object to a string?
Filtering or hiding properties helps us protect sensitive data or reduce the size of the string when only some information is needed.
What is the difference between JSON.stringify and JSON.parse?
JSON.stringify changes a JavaScript object into a string, while JSON.parse changes a JSON string back into a JavaScript object.
Can we format the output of JSON.stringify to make it easier to read?
Yes, by using the third argument in JSON.stringify, we can add spaces or indentation to make the JSON string more readable.
Are there any data types that JSON.stringify cannot handle?
JSON.stringify cannot convert functions, undefined, or symbols; these values are either ignored or changed to null in the output.
How is JSON.stringify useful for working with databases or APIs?
It helps us send data from JavaScript to databases or APIs by converting objects into a format that those systems can understand.
Can we use JSON.stringify to make a deep copy of an object?
Yes, we can use JSON.stringify to create a string and then JSON.parse to turn it back into a new object, which gives us a deep copy of the original.
What happens if we use JSON.stringify on a Date object?
JSON.stringify converts a Date object into a string in the ISO date format, which is easy to store and share.
AI Dev Assistant Tips
AI coding assistants like Copilot or ChatGPT help us quickly convert objects to strings, explain how JSON.stringify works, and suggest custom formatting code. These tools can also review our code for errors or improvements, making our learning smoother and faster.
Copy-Paste-Ready AI Prompt
Explain how to use JSON.stringify in JavaScript, show examples for custom formatting, and give tips for hiding properties.
- Use clear and specific prompts for better results from AI tools
- Always review and test code suggestions before using them
- Treat AI as a teammate, not a replacement for our own understanding
Conclusion
JSON.stringify() is like a translator for JavaScript objects. It turns them into a special kind of text that computers can easily read and share with each other. Furthermore, customizing serialization with JSON.stringify() increases the flexibility and usefulness of the JSON.stringify() method in JavaScript. It is recommended to convert JavaScript object into JSON string, before performing any further operations. We hope you enjoyed it.
Also Read:
- Introducing Object.groupBy() and Map.groupBy() in JavaScript
- Send a JSON response using Express Framework
Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
About the Author
Aditya Gupta is a Full Stack Developer with over 3 years of experience building scalable and maintainable web applications. He is passionate about writing clean code and helping other developers level up their skills in the modern JavaScript ecosystem.
Connect on LinkedIn: https://www.linkedin.com/in/dev-aditya-gupta/