JSON Stringify
JSON.stringify() converts a JavaScript value into a JSON-formatted string so it can be stored, transmitted, or logged in a portable text form.
Turning Objects Into Text
JavaScript objects live in memory as structured data, but many systems - files, network requests, log outputs - only understand text. JSON.stringify() bridges that gap by serializing any JavaScript value (objects, arrays, strings, numbers, booleans, null) into a JSON-formatted string that any language can parse later.
Basic stringify
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const user = { name: "Riya", age: 29, active: true };
const text = JSON.stringify(user);
console.log(text);
// '{"name":"Riya","age":29,"active":true}'
console.log(typeof text);
// "string"
</script>
</body>
</html>The Replacer Parameter
The second argument to JSON.stringify() is a replacer, which controls exactly what gets included in the output. Pass an array of key names to allow-list specific fields, or pass a function to transform or filter values as the object is walked.
Replacer as an array and a function
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const account = { id: 42, username: "devraj", password: "secret123", role: "admin" };
// Array replacer: only keep listed keys
const safe = JSON.stringify(account, ["id", "username", "role"]);
console.log(safe);
// '{"id":42,"username":"devraj","role":"admin"}'
// Function replacer: drop any key named "password"
const redacted = JSON.stringify(account, (key, value) => {
return key === "password" ? undefined : value;
});
console.log(redacted);
// '{"id":42,"username":"devraj","role":"admin"}'
</script>
</body>
</html>Pretty-Printing With the Spacing Argument
The third argument controls indentation. Pass a number to indent with that many spaces, or pass a string (like a tab character) to use it as the indent unit. This is purely cosmetic - it makes output readable for humans but changes nothing about how the data parses back.
Indenting output
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const config = { theme: "dark", retries: 3, features: ["search", "export"] };
console.log(JSON.stringify(config, null, 2));
/*
{
"theme": "dark",
"retries": 3,
"features": [
"search",
"export"
]
}
*/
console.log(JSON.stringify(config, null, "\t"));
// Same structure, indented with tab characters
</script>
</body>
</html>- JSON.stringify(value) - compact one-line output
- JSON.stringify(value, replacer) - filter or transform keys
- JSON.stringify(value, null, spaces) - pretty-print with indentation
- JSON.stringify(value, replacer, spaces) - combine both
Values That Do Not Survive
Not everything in JavaScript maps cleanly to JSON. Functions, undefined values, and Symbols are silently dropped when they appear as object properties, and become null when they appear inside an array. Dates are converted to ISO date strings automatically via their toJSON() method.
Dates and dropped values
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const record = {
createdAt: new Date("2024-01-01"),
handler: function () {},
note: undefined,
count: NaN
};
console.log(JSON.stringify(record));
// '{"createdAt":"2024-01-01T00:00:00.000Z","count":null}'
</script>
</body>
</html>Exercise: JSON Stringify
What does JSON.stringify() do?
