JSON.stringify()

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data format used for storing and transporting data. It is commonly used when data is sent from a server to a web page. JSON is easy for humans to read and write, and easy for machines to parse and generate.

In JavaScript, JSON is an object with two main methods:

• JSON.stringify(): Converts a JavaScript object into a JSON string.
• JSON.parse(): Converts a JSON string back into a JavaScript object.

---

What is JSON.stringify()?

JSON.stringify() is used to convert JavaScript objects, arrays, or values into a JSON-formatted string. This is useful for:

• Sending data to web servers via AJAX.
• Saving data in localStorage or sessionStorage.
• Logging or debugging complex objects.

---

Syntax

javascriptCopyEditJSON.stringify(value[, replacer[, space]])

• value: The JavaScript object or value to convert.
• replacer (optional): A function or array to filter properties.
• space (optional): A number or string used to insert white space for readability (pretty printing).

---

Basic Examples

1. Simple object

javascriptCopyEditconst user = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Alice","age":25}'

2. Array of objects

javascriptCopyEditconst users = [{ name: "John" }, { name: "Jane" }];
console.log(JSON.stringify(users));
// Output: '[{"name":"John"},{"name":"Jane"}]'

---

Using the replacer parameter

You can filter which properties get included.

1. Using an array

javascriptCopyEditconst user = { name: "Bob", age: 30, password: "secret" };
const jsonString = JSON.stringify(user, ["name", "age"]);
console.log(jsonString); // '{"name":"Bob","age":30}'

2. Using a function

javascriptCopyEditfunction replacer(key, value) {
  if (key === "password") return undefined;
  return value;
}
const jsonString = JSON.stringify(user, replacer);
console.log(jsonString); // '{"name":"Bob","age":30}'

---

Using the space parameter

This helps format the output for readability.

javascriptCopyEditconst user = { name: "Eve", age: 40 };
console.log(JSON.stringify(user, null, 2));

Output:

jsonCopyEdit{
  "name": "Eve",
  "age": 40
}

---

Special Cases

1. undefined, functions, and symbols are omitted

javascriptCopyEditconst obj = {
  name: "Tom",
  greet: function() {},
  code: undefined,
  symbol: Symbol("id")
};
console.log(JSON.stringify(obj)); // '{"name":"Tom"}'

2. Circular references cause an error

javascriptCopyEditconst a = {};
a.self = a;
JSON.stringify(a); // TypeError: Converting circular structure to JSON

You must avoid circular structures or use a custom solution (like a third-party library).

---

Common Use Cases

• APIs: Send objects via HTTP requests.
• Storage: Store objects in localStorage: javascriptCopyEditlocalStorage.setItem("user", JSON.stringify(user));
• Debugging: javascriptCopyEditconsole.log(JSON.stringify(someObject, null, 2));

---

Conclusion

JSON.stringify() is an essential tool in JavaScript for converting objects into a string format suitable for storage or transmission. Mastering it helps in working with APIs, debugging, and managing persistent data in web applications. Remember its limitations—like omitting functions and circular references—but also take advantage of its powerful formatting and filtering capabilities.