JSON

What is it?

When two different programs need to share data — a browser and a server, for example — they need a shared, text-based way to represent it, since raw JavaScript objects only exist inside a running JavaScript program. JSON (JavaScript Object Notation) is that shared format: plain text that looks a lot like a JavaScript object or array, that virtually every programming language knows how to read and write.

Explain like I'm 10

JSON is like a universally understood recipe card format. Any chef (any programming language) can read a recipe written in that standard format, even if their own kitchen (their own language) is completely different from the one that wrote it.

Examples

Converting between objects and JSON text

const user = { name: "Amara", age: 28 };

const json = JSON.stringify(user);
console.log(json); // '{"name":"Amara","age":28}' — now just text

const parsed = JSON.parse(json);
console.log(parsed.name); // "Amara" — back to a real object

Saving and restoring data with localStorage

const settings = { theme: "dark", fontSize: 16 };

localStorage.setItem("settings", JSON.stringify(settings));

// ...later, maybe after a page reload:
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.theme); // "dark"

localStorage can only store strings, so JSON is the standard way to save a structured object into it and read a real object back out later.

How it works

JSON.stringify walks through an object or array and produces a text representation following JSON's strict rules (double-quoted keys, no functions, no undefined). JSON.parse does the reverse: it reads that text and reconstructs the equivalent JavaScript value. Both are pure text transformations — nothing about JSON itself is JavaScript-specific, even though its syntax was inspired by JavaScript object literals.

Why does it exist?

Before JSON became standard, exchanging structured data between different systems (especially over the web) often meant using more verbose formats like XML, or inventing custom ones. JSON's simplicity and close resemblance to JavaScript objects made it the dominant format for APIs and configuration.

When to use it

Use JSON whenever you need to send structured data between a client and a server (most API responses are JSON), save structured data to a file or localStorage, or pass data between programs written in different languages.

When not to use it

JSON can't represent everything a JavaScript value can — functions, undefined, and circular references are all silently dropped or cause an error. For data that needs those things, or that's extremely large and performance-sensitive, other formats or approaches might fit better.

Common mistakes

• Trying to JSON.stringify an object containing functions or undefined values and being surprised they're silently dropped.

• Forgetting that JSON.parse throws an error on invalid JSON text, and not wrapping it in a try/catch when the input isn't guaranteed to be valid.

• Assuming JSON supports comments or trailing commas — it doesn't; it's stricter than a plain JavaScript object literal.

Practice exercises

1. Easy:

   Convert a small object to a JSON string with JSON.stringify, then back with JSON.parse, and confirm the values match.

2. Medium:

   Store an object in localStorage as a JSON string, then read and parse it back on page load.

3. Hard:

   Write a function that safely parses possibly-invalid JSON text, returning null instead of throwing if it's malformed.

Interview questions

What does `JSON.stringify` do?

Converts a JavaScript value into a JSON-formatted text string.

What happens to functions and `undefined` values when you stringify an object containing them?

They're omitted entirely from the resulting JSON string — JSON has no way to represent them.

Why is JSON so commonly used for APIs?

It's simple, lightweight, human-readable, and supported natively or via libraries in virtually every programming language.