JSON Parse

JSON.parse turns JSON text into a JavaScript value you can work with. It is strict about the rules from the Syntax lesson, so it needs a safety net around it, and it has an optional second argument for reshaping data as it is read.

// JSON.parse(text)

Give it a string of valid JSON and it returns the matching value: an object, array, string, number, boolean, or null.

const text = '{"name":"Ava","scores":[90,85],"active":true}';
const student = JSON.parse(text);
console.log(student.name);
console.log(student.scores[0] + student.scores[1]);
console.log(student.active);

The result is a brand-new, independent value. Changing it does not touch the original text, and parsing the same text twice gives two separate objects.

const text = '{"n":1}';
const a = JSON.parse(text);
const b = JSON.parse(text);
a.n = 99;
console.log(a.n, b.n, a === b);

// Invalid JSON Throws

If the text breaks any rule, JSON.parse throws a SyntaxError and gives you no result at all. Put it in a try...catch whenever the text comes from somewhere you do not control (a server, a file, a text box):

function safeParse(text, fallback) {
  try {
    return JSON.parse(text);
  } catch (error) {
    console.log("Bad JSON:", error.name);
    return fallback;
  }
}

console.log(safeParse('{"ok": true}', {}));
console.log(safeParse("{ok: true}", {}));
console.log(safeParse("", null));

Notice the empty string "": it is not valid JSON either, because an empty document has no value in it.

const already = { a: 1 };
try {
  JSON.parse(already);
} catch (error) {
  console.log(error.name);
}
console.log(String(already));

// The Reviver: Reshape As You Read

JSON.parse accepts an optional second argument, a reviver function. It is called once for every key and value, working from the innermost values outward, and whatever it returns replaces that value. The classic use is turning date strings back into Date objects:

const text = '{"title":"Report","due":"2026-10-02T00:00:00.000Z"}';

const data = JSON.parse(text, function (key, value) {
  if (key === "due") {
    return new Date(value);
  }
  return value;
});

console.log(typeof data.title);
console.log(data.due instanceof Date);
console.log(data.due.getUTCDate());

The reviver receives the key and the already-parsed value. Always return a value: if you forget the final return value;, every other key becomes undefined. Returning undefined deliberately removes that key from the result.

const text = '{"name":"Ava","password":"secret","grade":10}';
const clean = JSON.parse(text, (key, value) => key === "password" ? undefined : value);
console.log(clean);

// Reading Saved Data

A common place to meet JSON.parse is the browser's saved data (a later lesson covers Web Storage). It stores only strings, so objects are saved with stringify and read back with parse:

const settings = { theme: "dark", fontSize: 18 };
const saved = JSON.stringify(settings);
console.log(typeof saved);
const loaded = JSON.parse(saved);
console.log(loaded.theme, loaded.fontSize + 2);

// Common Mistakes

• Single quotes or unquoted keys in the text (see JSON Syntax)
• Parsing without a try...catch when the text comes from outside your program
• Calling JSON.parse on a value that is already an object
• Forgetting return value; at the end of a reviver
• Expecting dates to come back as Date objects: they are strings until you convert them

// Quick Check

const a = JSON.parse('{"n":1}');
const b = JSON.parse('{"n":1}');
console.log(a === b);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Read each result before the code that causes it
2. Break the JSON text (remove a quote) and watch the safe parser catch it
3. Write a reviver that turns every value that is a string of digits, like "42", into a number
4. Write a function parseOrNull(text) that returns null for bad JSON