Mastering JSON.stringify() and JSON.parse() in JavaScript

1. What is JSON.stringify()

JSON.stringify() converts a JavaScript object into a JSON-formatted string.

Example: Convert Object to JSON String

const user = { name: "Alice", age: 25, city: "New York" };

const jsonString = JSON.stringify(user);

console.log(jsonString); // Output: '{"name":"Alice","age":25,"city":"New York"}'

Type Info

• user: { name: string; age: number; city: string; } (Object)
• jsonString: string

✅ Use Cases:

• Storing data in localStorage
• Sending data to an API
• Saving object as a string

2. What is JSON.parse()

JSON.parse() converts a JSON string back into a JavaScript object.

Example: Convert JSON String to Object

const jsonString = '{"name":"Alice","age":25,"city":"New York"}';

const userObject = JSON.parse(jsonString);

console.log(userObject.name); // Output: Alice
console.log(userObject.age);  // Output: 25

✅ Use Cases:

• Retrieve data from localStorage
• Read data received from an API
• Convert string back to object

3. Real-World Use Cases

Storing & Retrieving Data in localStorage

// Create a JavaScript object
const user = { name: "John", age: 30 };

// Convert the object into a JSON string and store it in localStorage with key "user"
localStorage.setItem("user", JSON.stringify(user));

// Retrieve the JSON string from localStorage using the same key
const storedUser = JSON.parse(localStorage.getItem("user"));// Parse it back to an object
console.log(storedUser.name); // Output: John

Sending & Receiving Data from API

(a) Sending Data

// Create a user object to send to the server
const user = { name: "Emma", age: 28 };

// Send a POST request to the API with the user data
fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" }, // Set content type to JSON
  body: JSON.stringify(user) // Convert the object to a JSON string and send it as request body
});

(b) Receiving Data

// Send a GET request to fetch user data from the server
fetch("https://api.example.com/users/1")
  .then(response => response.json()) // Convert JSON response into JavaScript object
  .then(data => console.log(data.name)); // Access and log the "name" property
  // Output: Emma

Deep Copying an Object

JavaScript objects are reference types. To create a deep copy:

// Create an original object with nested array (reference type)
const original = { name: "David", hobbies: ["reading", "sports"] };

// Create a deep copy by converting to string and parsing back to object
const copy = JSON.parse(JSON.stringify(original)); // This creates a new object with no shared reference

// Modify the copy's hobbies array by pushing a new value
copy.hobbies.push("music");

// Original remains unchanged because the copy is independent
console.log(original.hobbies); // Output: ["reading", "sports"]
console.log(copy.hobbies);     // Output: ["reading", "sports", "music"]

🔎 Note:

Using = only copies references. JSON.stringify() + JSON.parse() creates a true deep copy.

---

Now you know when and how to use JSON.stringify() and JSON.parse() effectively in your JavaScript projects!

✅ Summary

• JSON.stringify() → Converts JavaScript object → JSON string

• JSON.parse() → Converts JSON string → JavaScript object

✅ Use them to store, send, and deep-copy data safely and easily