JSON.parse() in JavaScript: Complete Guide with Examples
JSON.parse() is one of the most-called functions in any JavaScript codebase. Here is the complete guide — from basic usage to the reviver function and error handling.
Basic JSON.parse() Usage
JSON.parse(text) accepts a JSON string and returns the corresponding JavaScript value. For an object, it returns a plain JavaScript object; for an array, a JavaScript array; for a string, number, boolean, or null, the corresponding primitive. The function throws SyntaxError for any input that is not valid JSON.
The most common usage pattern is parsing API responses after fetching: const data = JSON.parse(responseText). In modern code, the Fetch API's response.json() method handles this automatically, parsing the response body as JSON and returning a Promise that resolves to the parsed value.
The reviver Parameter
JSON.parse() accepts an optional second argument — a reviver function — that is called for each key-value pair as the JSON is parsed. The reviver receives the key and value and can return a transformed value or undefined to delete the property. This enables custom deserialization logic.
A common use of the reviver is converting ISO 8601 date strings back to JavaScript Date objects: if the value matches a date pattern, return new Date(value); otherwise return value. Without a reviver, dates come back as strings and must be converted manually.
Error Handling for JSON.parse()
JSON.parse() throws synchronously, so it must be wrapped in a try/catch block when parsing untrusted input. A robust parsing pattern is: try { return JSON.parse(text); } catch { return null; } — this returns null for invalid JSON instead of throwing.
The SyntaxError message from a failed parse includes the character position but not the surrounding context. To get a more useful error message for debugging, log the first 200 characters of the input alongside the error message. This makes it much faster to identify what went wrong.
Parsing Nested and Complex JSON
JSON.parse() handles arbitrary nesting depth without any special configuration. A deeply nested response object is parsed into the equivalent nested JavaScript object graph. Type safety, however, is not guaranteed — the parsed result is typed as any in TypeScript unless you add a type assertion or use a validation library.
For TypeScript projects, combine JSON.parse() with a runtime validation library (zod, io-ts, ajv) to both parse and validate the structure simultaneously. This gives you the type safety of a schema check with the ergonomics of JavaScript's native JSON parsing.
Try JSON Parser Free Online
No sign-up required. 100% client-side — your data never leaves your browser.
Open JSON Parserarrow_forwardFrequently Asked Questions
What is the difference between JSON.parse() and response.json()?
response.json() is a method on the Fetch API Response object that reads the response body as text and calls JSON.parse() on it. It returns a Promise. JSON.parse() is synchronous and accepts a string you already have.
Can JSON.parse() handle very large JSON strings?
Yes, but very large strings (hundreds of MB) may cause memory issues since JSON.parse() parses the entire string synchronously. For streaming JSON parsing, use a streaming library like clarinet or oboe.js.
Why does JSON.parse("undefined") throw but JSON.parse("null") succeeds?
null is a valid JSON value. undefined is a JavaScript concept with no JSON equivalent. JSON.parse() follows the JSON specification, not JavaScript semantics.