JSON.parse & JSON.stringify — Parse JSON strings with JSON.parse and serialize with JSON.stringify

In the early days of the web, programs needed a way to send structured data between a web browser and a server. Before JSON (JavaScript Object Notation) existed, developers relied heavily on XML, a verbose markup language that required many lines of tags just to describe simple data. XML worked, but it was bulky and hard to read. Developers wanted something lighter — a format that was easy for both humans and machines to understand.

Douglas Crockford recognized that JavaScript's object literal syntax was already a clean, minimal way to represent data. He formalized this syntax into a standalone data format and named it JSON. Because JSON looks almost identical to the code developers were already writing in JavaScript, adoption was rapid. Today, JSON is the dominant data format for web APIs, configuration files, and data storage across virtually every programming language.

The core challenge that JSON.parse and JSON.stringify solve is this: how do you convert a living JavaScript object into a plain text string that can be stored or transmitted, and how do you convert that string back into a usable object? This two-way conversion — called serialization and deserialization — is fundamental to almost every web application you use.

Before diving into the code, you need to understand a few foundational ideas. JSON is built on two universal data structures that exist in virtually every programming language: ordered lists (arrays) and key-value pairs (objects). These two building blocks can represent almost any kind of structured information, from a student's grade report to a social media post.

The diagram below shows the two-way conversion between a JavaScript object and a JSON string. Notice how the object on the left is a live, in-memory data structure that your code can manipulate directly, while the string on the right is just plain text — a sequence of characters that could be saved to a file or sent across the internet.

Notice a few key differences between the object and the JSON string. In the JavaScript object, property keys like name do not require quotes. In the JSON string, every key must be wrapped in double quotes. The entire JSON output is also wrapped in an outer pair of single quotes because it's a string value in JavaScript. This distinction — object versus string — is the entire reason these two methods exist.

JSON.stringify() — Object to String

The JSON.stringify() method accepts up to three arguments. The first argument is the value you want to serialize. The optional second argument is a replacer — either an array of key names to include, or a function that transforms values during serialization. The optional third argument is a spacer — a number or string that adds indentation for readability.

JSON.parse() — String to Object

The JSON.parse() method takes a JSON-formatted string and converts it back into a JavaScript value. It accepts two arguments. The first is the JSON string to parse. The optional second argument is a reviver function that lets you transform values as they are being parsed — for example, converting date strings back into Date objects.

What Gets Lost in Translation

Not everything survives the round trip through stringify and parse. Functions, undefined values, and Symbols are silently dropped during serialization. Date objects are converted to strings but are NOT automatically converted back to Dates when parsed. NaN and Infinity become null. Understanding these limitations is essential to avoiding subtle bugs in your code.

Understanding exactly which data types are preserved, transformed, or lost during serialization is one of the most important things to master. The table below provides a complete reference for every common JavaScript type and what happens when you run it through JSON.stringify() and then JSON.parse().

Let's walk through a realistic scenario. Imagine you're building a student grade tracker, and you need to save a student's data to localStorage (the browser's built-in storage). Since localStorage can only store strings, you must serialize your object before saving it and parse it when loading it back.

JSON is not the only data format used in programming. Understanding how it compares to alternatives helps you appreciate why it has become the default choice for most web development. Below is a comparison of JSON with two other common formats: XML and CSV.

Once you're comfortable with the basics of JSON.parse() and JSON.stringify(), several advanced patterns build on these fundamentals. The replacer, reviver, and deep-copy techniques are especially useful as your programs grow more complex.

As you move into more advanced JavaScript — especially when working with frameworks like React or back-end tools like Node.js — you'll use JSON constantly. Every time your app communicates with a server via a REST API, the data travels as JSON text. The fetch() function's .json() method is essentially a wrapper around JSON.parse(). Modern JavaScript also offers structuredClone() as a more robust alternative to the JSON deep-copy trick, but understanding the JSON approach is still essential foundational knowledge.