JSON: The Language of Data

JavaScript objects are how your program works with structured data. JSON is how that data often travels as text. JSON looks close to an object literal, but it is stricter, smaller, and designed to be exchanged between programs that may not even run JavaScript.

JSON is text, not an object

JSON stands for JavaScript Object Notation. The name is historical: JSON borrowed JavaScript's object-and-array shape, then became a language-independent data format.

const playerObject = {
  name: "Mina",
  score: 18,
  active: true,
  rank: null,
};
 
const playerJson = `{"name":"Mina","score":18,"active":true,"rank":null}`;
const parsedPlayer = JSON.parse(playerJson);
 
console.log(playerObject.name);
console.log(typeof playerJson);
console.log(parsedPlayer.name);
console.log(parsedPlayer.rank === null);

→ Mina, string, Mina, then true.

playerObject is a JavaScript object your program can use immediately. playerJson is a string that contains JSON text. JSON.parse(playerJson) reads that text and creates a real JavaScript value.

That distinction matters. You can read parsedPlayer.name because parsing created an object. You cannot read playerJson.name; the JSON value is still just text until you parse it.

JSON syntax is stricter than object syntax

JSON and object literals are close enough to feel related, but not identical. JSON allows only data:

• object keys must use double quotes: "name", not name
• strings must use double quotes: "Mina", not 'Mina'
• values can be objects, arrays, strings, numbers, booleans, or null
• no comments
• no trailing commas
• no functions
• no undefined

JavaScript object literals are more relaxed because they are code. JSON is stricter because many languages need to read it the same way.

This is valid JavaScript, but invalid JSON:

JSON.parse(`{
  name: "Mina",
}`);

JSON.parse throws a SyntaxError. V8 includes position details in the message; that wording varies, but the useful lesson is stable: unquoted keys and trailing commas are not JSON.

Stringify and parse

The two core tools are a matched pair:

• JSON.stringify(value) turns a JavaScript value into JSON text.
• JSON.parse(text) turns JSON text back into a JavaScript value.

const player = {
  name: "Mina",
  score: 18,
  badges: ["starter", "mentor"],
  active: true,
};
 
const text = JSON.stringify(player);
const roundTrip = JSON.parse(text);
 
console.log(text);
console.log(roundTrip.name);
console.log(roundTrip.badges[1]);
console.log(roundTrip === player);

→ {"name":"Mina","score":18,"badges":["starter","mentor"],"active":true}, then Mina, mentor, false.

The last line is important after 7.4. Parsing creates a new object. roundTrip has the same data shape as player, but it is not the same object identity.

Use this pair when data needs to cross a text boundary: a file, an API payload, a queue message, or a storage slot that only accepts strings.

Pretty-print JSON

Compact JSON is efficient, but hard for humans to scan. JSON.stringify accepts a third argument for indentation.

const player = {
  name: "Mina",
  score: 18,
  badges: ["starter", "mentor"],
};
 
const compact = JSON.stringify(player);
const pretty = JSON.stringify(player, null, 2);
 
console.log(compact);
console.log(pretty.includes("\n"));
console.log(pretty.includes(`  "score"`));

→ {"name":"Mina","score":18,"badges":["starter","mentor"]}, then true, then true — the pretty version contains line breaks and two-space indentation.

The middle argument is advanced customization you can ignore for now, so this course uses null there. Read JSON.stringify(value, null, 2) as "turn this into readable JSON with two spaces per nesting level."

Pretty JSON is useful in logs, config files, and saved examples. Compact JSON is common when programs send data to each other.

What survives serialization

Serialization means turning a live value into text. JSON serialization preserves data, not behavior.

const player = {
  name: "Mina",
  score: 18,
  rank: undefined,
  coach: null,
  label() {
    return `${this.name}: ${this.score}`;
  },
};
 
const text = JSON.stringify(player);
const parsed = JSON.parse(text);
 
console.log(text);
console.log(parsed.name);
console.log(parsed.rank);
console.log(parsed.coach === null);
console.log(typeof parsed.label);

→ {"name":"Mina","score":18,"coach":null}, then Mina, undefined, true, undefined.

name, score, and coach survived because they are JSON data. rank did not survive because undefined is not a JSON value. label did not survive because functions are behavior, not JSON data.

This is why JSON is a data format, not a full program format. If you need behavior, write code around the parsed data after it comes back.

Try it — round-trip a settings file

Run this, then change one player score inside savedText. At the › prompt, inspect savedText, state, and outputText.

This is the real rhythm: text comes in, JSON.parse creates values, your JavaScript transforms those values, and JSON.stringify turns the result back into text.

JSON is everywhere

You will see JSON in three places constantly:

• APIs: many services send and receive request/response bodies as JSON text.
• config files: tools often store settings in JSON or JSON-like files.
• storage: many storage systems accept strings, so structured data gets stringified before saving and parsed after loading.

The important habit is to know which side of the boundary you are on. Inside your code, you want JavaScript objects and arrays. At the boundary, you often need JSON text.

Section 7 gave you the core object toolkit: properties, destructuring, methods, references, copying, and JSON. Next, Section 8 compares objects with Maps and Sets so you can choose the right structure for each kind of data.