JSON Introduction

By the end of this lesson, you will be able to explain what JSON is, convert JavaScript values to JSON text with JSON.stringify(), and convert JSON text back into JavaScript values with JSON.parse().

What it is

JSON, or JavaScript Object Notation, is a lightweight text format for representing structured data. It is language-independent, but its syntax is familiar to JavaScript developers. JSON is used when data must be stored as text or sent between systems, such as an API response, a configuration file, or browser storage.

A useful mental model is: a JavaScript object is a live value in memory, while JSON is a string that describes that value. Related terms include object, array, key, value, serialization, and deserialization.

Why it matters

• APIs commonly exchange data as JSON text.
• Browser storage APIs such as localStorage store strings, so JSON is used to save objects.
• Configuration files and logs can be parsed reliably when written as JSON.
• JSON keeps data portable across languages and platforms.
• It supports common data shapes: objects, arrays, strings, numbers, booleans, and null.

Syntax or steps

JSON text uses double quotes around property names and string values. It does not allow comments, trailing commas, functions, undefined, or single-quoted strings.

1. Create a JavaScript value such as an object or array.
2. Convert it to JSON text with JSON.stringify(value).
3. Send, store, or display the text.
4. Convert JSON text back with JSON.parse(text).

Example

const data = { name: "Ada", age: 36, active: true };

const jsonText = JSON.stringify(data);
console.log(jsonText);

const restored = JSON.parse(jsonText);
console.log(restored.name);
console.log(typeof restored);

Part-by-part explanation:

• const data = ... creates a JavaScript object in memory.
• JSON.stringify(data) serializes the object into a JSON string.
• console.log(jsonText) prints {"name":"Ada","age":36,"active":true}.
• JSON.parse(jsonText) reads the JSON string and creates a new JavaScript object.
• typeof restored is "object", showing the parsed value is usable as an object.

Common mistakes

• Using single quotes in JSON. Fix: use double quotes, for example {"name":"Ada"}.
• Adding trailing commas. Fix: remove commas before } or ].
• Trying to store functions or undefined in JSON. Fix: store only data; functions must be recreated in code.
• Calling JSON.parse() on an object. Fix: parse only JSON text; if the value is already an object, use it directly.

When to use it

Use JSON when data must exist as text. Use JavaScript object literals when data stays inside the same program.

Practice

Guided exercise: create an object with your name, a number, and a boolean. Convert it to JSON text, then parse it back and log one property.

const person = { name: "Grace", score: 98, passed: true };
const text = JSON.stringify(person);
const parsed = JSON.parse(text);
console.log(parsed.name);

Expected output: Grace.

Challenge: convert an array of objects to JSON text, then parse it and log the second object's name. Hint: use JSON.stringify() on the array and parsed[1].name after parsing.

Quick check

Question: Why does JSON.stringify() return a string instead of an object?

Answer: Because JSON is a text format. The string can be stored or transmitted; JSON.parse() turns it back into a JavaScript object.

Summary

JSON is a portable text representation of structured data. In JavaScript, JSON.stringify() converts values to JSON text, and JSON.parse() converts JSON text back into values. Remember that JSON is not the same as a JavaScript object literal.