JSONApril 20265 min read

JSON.stringify vs JSON.parse: The Complete Guide with Examples

These two functions are the gatekeepers between JavaScript objects and JSON text. They're used in nearly every web application — but they're easy to confuse and misuse. This guide explains both clearly.

The one-sentence difference

JSON.stringify()

Takes a JavaScript object and converts it to a JSON string. Object → Text.

JSON.parse()

Takes a JSON string and converts it to a JavaScript object. Text → Object.

JSON.stringify — Object to String

Use JSON.stringify() whenever you need to send data somewhere — an API, localStorage, a file, a cookie. These destinations accept text, not JavaScript objects.

javascript

const user = { name: "Ada", age: 36, active: true };

JSON.stringify(user);
// '{"name":"Ada","age":36,"active":true}'

// Pretty-print with indentation (great for debugging)
JSON.stringify(user, null, 2);
// '{
//   "name": "Ada",
//   "age": 36,
//   "active": true
// }'

// Store in localStorage
localStorage.setItem("user", JSON.stringify(user));

// Send in a fetch request
fetch("/api/user", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(user)
});

JSON.parse — String to Object

Use JSON.parse() whenever you receive data as text and need to work with it as a JavaScript object — from an API response, localStorage, a file, or environment variables.

javascript

const jsonString = '{"name":"Ada","age":36,"active":true}';

const user = JSON.parse(jsonString);
console.log(user.name);   // "Ada"
console.log(user.age);    // 36

// Read from localStorage
const stored = localStorage.getItem("user");
const userData = JSON.parse(stored);

// Parse API response
fetch("/api/user")
  .then(res => res.json())  // res.json() calls JSON.parse internally
  .then(data => console.log(data.name));

Common mistakes and how to fix them

Mistake 1: Parsing an already-parsed object

javascript

// Wrong — user is already an object, not a string
const user = { name: "Ada" };
JSON.parse(user); // SyntaxError: Unexpected token o

// Right — only parse strings
const jsonStr = '{"name":"Ada"}';
JSON.parse(jsonStr); // { name: "Ada" }

Mistake 2: Not wrapping JSON.parse in try/catch

javascript

// Dangerous — crashes if input is invalid JSON
const data = JSON.parse(someString);

// Safe — handles invalid JSON gracefully
function safeParse(str, fallback = null) {
  try {
    return JSON.parse(str);
  } catch (e) {
    return fallback;
  }
}

const data = safeParse(someString, {});

Mistake 3: Stringifying values that JSON doesn't support

javascript

// These values get dropped or converted:
JSON.stringify({ fn: () => {}, sym: Symbol("x") });
// '{}'  — functions and symbols are omitted

JSON.stringify({ val: undefined });
// '{}'  — undefined values are omitted

JSON.stringify({ n: NaN, i: Infinity });
// '{"n":null,"i":null}'  — converted to null

// Dates become strings:
JSON.stringify({ date: new Date() });
// '{"date":"2026-04-01T00:00:00.000Z"}'
// JSON.parse won't convert them back to Date objects!

Deep clone trick using JSON

A quick way to deep clone a plain object — though it has the limitations above and is slower than structuredClone():

javascript

const original = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(original));
// clone is a deep copy — modifying it won't affect original

// Modern alternative (better):
const clone2 = structuredClone(original);

Paste any JSON to instantly format, validate, or minify it in your browser.

Open JSON Formatter →