JSON

Parsing and serialising JSON in JavaScript — JSON.parse, JSON.stringify, replacers, revivers, and common pitfalls.

What it is, in plain English: JSON (JavaScript Object Notation) is a text format for storing and transferring data. It looks like JavaScript object literal syntax but is stricter: keys must be quoted strings, and only six value types are allowed (string, number, boolean, null, array, object). In JavaScript, JSON.stringify() converts a value to a JSON string, and JSON.parse() converts a JSON string back to a JavaScript value.

Storing and transferring data as text

When your JavaScript app needs to save data to a file, send it to a server, or store it in localStorage, it has to convert the data to a string first. JSON is the universal format for that — every language and platform understands it.

JSON.stringify() — convert a value to a JSON string

const product = {
  name:  "Wireless Headphones",
  price: 2999,
  inStock: true,
  tags: ["audio", "wireless"],
};

const json = JSON.stringify(product);
console.log(json);
// {"name":"Wireless Headphones","price":2999,"inStock":true,"tags":["audio","wireless"]}
console.log(typeof json);  // "string"

// Pretty-print (easier to read):
console.log(JSON.stringify(product, null, 2));
// {
//   "name": "Wireless Headphones",
//   "price": 2999,
//   ...
// }

JSON.parse() — convert a JSON string back to a value

const text = '{"name":"Alice","age":30,"scores":[95,87,72]}';

const obj = JSON.parse(text);
console.log(obj.name);     // "Alice"
console.log(obj.age);      // 30
console.log(obj.scores);   // [95, 87, 72]

// Common use: read from localStorage
localStorage.setItem("user", JSON.stringify({ name: "Bob" }));
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name);  // "Bob"

What JSON supports — and what it drops

JSON is not JavaScript. JSON only supports 6 types: string, number, boolean, null, array, and object (with string keys). Everything else is silently dropped or converted when you stringify.

const data = {
  name:    "Carol",             // ✓ string → kept
  age:     25,                  // ✓ number → kept
  active:  true,                // ✓ boolean → kept
  address: null,                // ✓ null → kept
  greet:   function() {},       // ✗ function → DROPPED
  id:      undefined,           // ✗ undefined → DROPPED
  sym:     Symbol("x"),         // ✗ Symbol → DROPPED
  created: new Date("2026-01-01"), // Date → converted to string
};

console.log(JSON.stringify(data));
// {"name":"Carol","age":25,"active":true,"address":null,"created":"2026-01-01T00:00:00.000Z"}

The deep copy trick (and its limits)

// JSON.parse(JSON.stringify(obj)) creates a deep copy:
const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
copy.b.c = 99;
console.log(original.b.c);  // 2 — original unchanged!

// But this fails for: functions, undefined, Dates (become strings),
// Sets, Maps, RegExp, Infinity, NaN (become null).
// For a real deep copy use: structuredClone(obj)

Try It Yourself

Replacers, revivers, and working with APIs

replacer — control what gets serialised

const user = { name: "Alice", password: "s3cr3t", age: 30, email: "alice@example.com" };

// Array replacer — only include listed keys:
JSON.stringify(user, ["name", "age"]);
// {"name":"Alice","age":30}  ← password omitted

// Function replacer — custom logic per key:
JSON.stringify(user, (key, value) => {
  if (key === "password") return undefined;  // drop it
  if (typeof value === "number") return value * 2;  // transform
  return value;
});
// {"name":"Alice","age":60,"email":"alice@example.com"}

reviver — transform values during parse

const text = '{"name":"Alice","joined":"2026-01-15","score":95}';

const data = JSON.parse(text, (key, value) => {
  // Convert date strings back to Date objects:
  if (key === "joined") return new Date(value);
  return value;
});

console.log(data.joined instanceof Date);  // true
console.log(data.joined.getFullYear());    // 2026

Working with fetch (the most common real use)

// GET — parse response JSON:
const res  = await fetch("https://api.example.com/user/1");
const user = await res.json();   // .json() calls JSON.parse internally

// POST — stringify request body:
const created = await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Bob", email: "bob@example.com" }),
});
const newUser = await created.json();

Handling circular references

// Circular reference crashes JSON.stringify:
const a = { name: "a" };
const b = { name: "b", ref: a };
a.ref = b;  // circular!
// JSON.stringify(a);  // throws: Converting circular structure to JSON

// Fix 1: use a replacer that tracks seen objects
function safeStringify(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) return "[Circular]";
      seen.add(value);
    }
    return value;
  });
}

// Fix 2: use the npm package 'flatted' for full circular support

toJSON() — custom serialisation

class Money {
  constructor(amount, currency) {
    this.amount = amount;
    this.currency = currency;
  }
  toJSON() {
    // Control exactly what gets serialised
    return `${this.amount} ${this.currency}`;
  }
}

const price = new Money(1299, "INR");
console.log(JSON.stringify({ price }));
// {"price":"1299 INR"}

JSON spec, streaming, and JSON5/JSONC

The JSON grammar (ECMA-262 §25.5 + RFC 8259)

JSON is defined by RFC 8259 (the IETF standard) and referenced from ECMA-262 §25.5. The grammar is deliberately minimal: six value types, no comments, no trailing commas, no undefined, no NaN/Infinity (these become null via the abstract operation SerializeJSONElement). Keys must be double-quoted strings — single quotes and unquoted identifiers are not valid JSON.

JSON.stringify internals — the Abstract Serialize operation

ECMA-262 §25.5.2 defines JSON.stringify via the abstract SerializeJSONObject and SerializeJSONArray operations. Key behaviours:

undefined, Function, Symbol values: omitted from objects, become null in arrays
Object with a toJSON method: that method is called first, result is serialised
Circular references: throw TypeError (not handled in spec — implementations must detect)
NaN, Infinity, -Infinity: serialised as null

Streaming JSON (Node.js)

// For large files — don't parse the whole thing into memory:
import { createReadStream } from "fs";
import { createInterface } from "readline";

// NDJSON (newline-delimited JSON) — one JSON object per line:
const rl = createInterface({ input: createReadStream("data.ndjson") });
for await (const line of rl) {
  const record = JSON.parse(line);
  // process one record at a time
}

JSON5 and JSONC — supersets

// JSON5 (json5.org) — superset with:
// - single-quoted strings, trailing commas, comments, unquoted keys, Infinity, hex
import JSON5 from "json5";
JSON5.parse("{ key: 'value', // comment
 n: +Infinity }");

// JSONC — JSON with Comments (used by tsconfig.json, VS Code settings)
// No standard parser — strip comments first:
import stripJsonComments from "strip-json-comments";
JSON.parse(stripJsonComments(tsconfigText));

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.