JSON in JavaScript: Serialization Pitfalls + Safe Parsing Patterns

JSON is everywhere in frontend work: APIs, localStorage, config, analytics.

Interviews use JSON questions to test whether you understand what JSON is and what it is not.

30‑second interview answer

JSON is a string data format with limited types (objects, arrays, strings, numbers, booleans, null). When you JSON.stringify, unsupported values like undefined/functions are dropped (and BigInt throws), and circular references fail. In real apps, always JSON.parse safely (try/catch) and validate shape before using the data.

Key points

• JSON ≠ JavaScript objects.
• stringify drops undefined/functions; BigInt throws.
• Dates become strings.
• Always parse safely + validate.

1) JSON is a data format (not JavaScript)

JSON supports only:

• objects with string keys
• arrays
• strings
• numbers
• booleans
• null

No:

• undefined
• functions
• symbols
• dates (no Date type)
• BigInt

2) JSON.stringify rules you must know

A) undefined is dropped (in objects)

JSON.stringify({ a: 1, b: undefined });
// '{"a":1}'

B) undefined becomes null (in arrays)

JSON.stringify([1, undefined, 3]);
// '[1,null,3]'

C) Functions are dropped

JSON.stringify({ fn() {} });
// '{}'

D) Dates become strings

JSON.stringify({ d: new Date('2025-01-01') });
// '{"d":"2025-01-01T00:00:00.000Z"}'

E) BigInt throws

JSON.stringify({ n: 10n });
// TypeError: Do not know how to serialize a BigInt

3) Circular references crash stringify

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

If you need to log/debug circular objects:

• use safe serializers
• or custom replacer

4) The replacer function (useful pattern)

const json = JSON.stringify(obj, (key, value) => {
  if (typeof value === 'bigint') return value.toString();
  return value;
});

You can also use replacer arrays to whitelist keys.

5) Safe parsing (don’t trust inputs)

A) Wrap JSON.parse

function safeJsonParse(str) {
  try {
    return { ok: true, value: JSON.parse(str) };
  } catch (err) {
    return { ok: false, error: err };
  }
}

B) Validate shape after parsing

Parsing only ensures it’s valid JSON—not that it’s the shape you expect.

In production apps, validate with a schema (e.g., Zod).

Pseudo:

• parse JSON
• validate schema
• reject invalid data

6) JSON in localStorage (common frontend case)

function save(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
 
function load(key, fallback) {
  const raw = localStorage.getItem(key);
  if (!raw) return fallback;
  const parsed = safeJsonParse(raw);
  return parsed.ok ? parsed.value : fallback;
}

7) Interview Q&A

Q: What’s the difference between JSON and JS objects?

• JSON is a string format with limited types; JS objects can contain functions, undefined, Dates, etc.

Q: Why does JSON stringify drop undefined?

• JSON spec doesn’t support undefined.

Q: How do you handle Dates with JSON?

• serialize as ISO strings; parse back into Date objects if needed.

Q: How do you avoid runtime errors from JSON.parse?

• try/catch + validation.

Summary checklist

• I can list JSON supported types.
• I know what stringify drops/throws.
• I can explain Date handling.
• I always parse with try/catch and validate.

Summary

• JSON supports a limited set of types.
• JSON.stringify drops functions/undefined (and BigInt throws).
• Circular refs break stringify.
• Always parse safely and validate shapes.