Is JSON the same as a JavaScript object?

No. JSON is a TEXT FORMAT (a string). JavaScript objects are live data structures. JSON looks similar to object literals but has stricter rules: double-quoted keys, no functions, no trailing commas, no comments.

Can I use JSON for local storage?

Yes! localStorage only stores strings, so use JSON.stringify() to save and JSON.parse() to read: localStorage.setItem('user', JSON.stringify(user)); const user = JSON.parse(localStorage.getItem('user'));

How do I deep clone an object with JSON?

const clone = JSON.parse(JSON.stringify(original)); This works but loses functions, Dates, and other non-JSON types. Prefer structuredClone(original) in modern JavaScript: it handles more types correctly.

Why use JSON over XML?

JSON is lighter, more readable, and maps directly to JavaScript data structures. XML is verbose and requires parsing into a DOM tree. JSON won because it's simpler for the common case: sending data between client and server.

JavaScript JSON

JavaScript Object Notation. The universal data exchange format.

Module 4 · Data Structures

Learn JSON in JavaScript: covering What is JSON?, JSON.stringify(), JSON.parse(), Working with APIs with interactive visual examples and step-by-step explanations.

About this module

JavaScript's core data structures are arrays (ordered lists accessed by index) and objects (key-value records accessed by name). Almost all real-world data, such as a list of products, a user profile, or an API response, is some combination of the two, so creating, reading, updating, and looping over them is essential for any project.

This module covers array methods like map and filter, object property access, destructuring assignment, the spread operator, and JSON: the format every REST API speaks. Visual memory diagrams show how references and copies behave so you avoid common mutation bugs.

Why this matters

Understanding json is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals, and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

What is JSON?
JSON.stringify()
JSON.parse()
Working with APIs
Limitations

Where you'll use it

Building interactive web applications with json
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

What is JSON?

A text format for storing and transmitting data.

JavaScript Object

{
  name: "Alice",
  age: 28,
  hobbies: ["reading"]
}

JSON String

{
  "name": "Alice",
  "age": 28,
  "hobbies": ["reading"]
}

JSON rules:

Keys must be double-quoted strings
Values: strings, numbers, booleans, null, arrays, objects
No functions, undefined, comments, or trailing commas
Strings must use double quotes (not single)

JSON.stringify()

Convert a JavaScript value to a JSON string.

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

// Basic:
JSON.stringify(user);
// '{"name":"Alice","age":28}'

// Pretty-printed (2-space indent):
JSON.stringify(user, null, 2);
// {
//   "name": "Alice",
//   "age": 28
// }

// With replacer (filter properties):
JSON.stringify(user, ["name"]);
// '{"name":"Alice"}'

{"name":"Alice","age":28,"skills":["JS","React"]}

JSON.parse()

Convert a JSON string back to a JavaScript value.

const jsonString = '{"name":"Alice","age":28}';

const user = JSON.parse(jsonString);
console.log(user.name); // "Alice"
console.log(user.age);  // 28

// Always handle parse errors:
try {
  const data = JSON.parse(maybeInvalid);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

// With reviver (transform values):
JSON.parse(json, (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});

⚠️ JSON.parse() throws on invalid JSON. Always wrap in try/catch when parsing user input or API responses.

Working with APIs

JSON is the standard format for web APIs.

// Fetch data from an API:
const response = await fetch("https://api.example.com/users");
const users = await response.json(); // auto-parses JSON

// Send JSON to an API:
await fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "Alice",
    email: "alice@example.com",
  }),
});

Common flow:

JS Object→ stringify →JSON String→ network →JSON String→ parse →JS Object

Limitations

What JSON can't do.

// These are LOST during stringify:
const obj = {
  fn: () => "hello",     // functions → removed
  date: new Date(),      // Date → string
  undef: undefined,      // undefined → removed
  regex: /hello/g,       // RegExp → empty object {}
  inf: Infinity,         // Infinity → null
  nan: NaN,              // NaN → null
};

JSON.stringify(obj);
// {"date":"2024-01-15T...","regex":{},"inf":null,"nan":null}
// fn and undef are completely gone!

Type	In JSON
string, number, boolean, null	✓ Supported
array, object	✓ Supported
undefined, function, Symbol	✗ Removed
Date	→ string (ISO format)
NaN, Infinity	→ null

FAQ

Common questions about json.

// Fetch data from an API: const response = await fetch("https://api.example.com/users"); const users = await response.json(); // auto-parses JSON // Send JSON to an API: await fetch("https://api.example.com/users", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ name: "Alice", email: "alice@example.com", }), });

// These are LOST during stringify: const obj = { fn: () => "hello", // functions → removed date: new Date(), // Date → string undef: undefined, // undefined → removed regex: /hello/g, // RegExp → empty object {} inf: Infinity, // Infinity → null nan: NaN, // NaN → null }; JSON.stringify(obj); // {"date":"2024-01-15T...","regex":{},"inf":null,"nan":null} // fn and undef are completely gone!

Type

In JSON

string, number, boolean, null

✓ Supported

array, object

✓ Supported

undefined, function, Symbol

✗ Removed

Date

→ string (ISO format)

NaN, Infinity

→ null

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What is JSON?

JSON.stringify()

JSON.parse()

Working with APIs

Limitations

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What is JSON?

JSON.stringify()

JSON.parse()

Working with APIs

Limitations

FAQ