JS JSON

JavaScript JSON: Serialization (stringify) & Parsing (parse)

JSON (JavaScript Object Notation) is a lightweight, text-based data-interchange format. JavaScript provides the JSON namespace object to serialize objects into JSON strings (JSON.stringify()) and parse JSON strings into objects (JSON.parse()).

JSON Serialization Lifecycle

flowchart LR
    JSObj["JavaScript Object / Value"] -->|JSON.stringify(obj, replacer)| JSONStr["JSON String Text ('{"id": 10}')"]
    JSONStr -->|JSON.parse(str, reviver)| RestoredObj["New Reconstructed JS Object"]

JSON Data Types Compatibility

Practical Code Example

// Demonstrating JSON parse, stringify, replacer, and reviver

const userAccount = {
  id: 101,
  username: "maksudur",
  createdAt: new Date(),
  secretToken: "SECRET_999", // Sensitive property to filter
  performAction: () => console.log("Action") // Function will be stripped
};

// 1. Custom Replacer: Exclude sensitive properties and format JSON
const jsonString = JSON.stringify(userAccount, (key, value) => {
  if (key === "secretToken") return undefined; // Exclude secretToken
  return value;
}, 2); // 2-space indentation

console.log("Serialized JSON Output:
" + jsonString);

// 2. Custom Reviver: Convert ISO date strings back into Date instances during parse
const parsedUser = JSON.parse(jsonString, (key, value) => {
  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}T/.test(value)) {
    return new Date(value); // Revive string into Date object
  }
  return value;
});

console.log("Parsed User Object:", parsedUser);
console.log(`Is createdAt a valid Date instance? ${parsedUser.createdAt instanceof Date}`);

Best Practices & Gotchas

• Circular Reference Error: Attempting to stringify objects containing circular references throws TypeError: Converting circular structure to JSON.
• Keys Must Be Double-Quoted: Valid JSON requires all property keys to be wrapped in double quotes ("key": "value"). Single quotes are invalid JSON syntax.
• Always Wrap JSON.parse() in try...catch: Malformed JSON strings throw unhandled SyntaxError exceptions during parsing.

Self-Check Challenge

Why does JSON.stringify({ fn: () => {}, val: undefined }) evaluate to "{}"?