Manipulating Data with JSON

At its heart, the internet is about communication. Browsers talk to servers, servers talk to databases, and different applications talk to each other. To do this, they need a common language, a universal format for exchanging data. For decades, that language was often XML, but today, the undisputed champion is **JSON** (JavaScript Object Notation).

JSON is a lightweight, text-based **data interchange format**. It's easy for humans to read and write, and easy for machines to parse and generate. Its syntax is a subset of JavaScript, which makes it incredibly native and simple to work with inside a browser.

The Syntax: Stricter Than It Looks

JSON's structure is built on two simple concepts: a collection of key/value pairs (an **object**) and an ordered list of values (an **array**).

This sounds just like a JavaScript object, but there are critical, strict rules you must follow:

• Keys Must Be Double-Quoted Strings: This is the most common mistake. In a JavaScript object, { name: 'Alex' } is valid. In JSON, it **must** be {"name": "Alex"}.
• No Trailing Commas: That extra comma after the last item in an object or array, which JavaScript allows, will cause a parse error in JSON.
• No Comments: JSON is a data-only format. It does not support `//` or `/* */` comments.
• Values Are Limited: A value can only be one of six types: a **string** (in double quotes), a **number**, an **object**, an **array**, a **boolean** (`true` or `false`), or **`null`**.

Types like `undefined`, `Symbol`, `Date`, or functions are **not** valid JSON types.

{
  "user": "alex_dev",
  "id": 12345,
  "isActive": true,
  "lastLogin": null,
  "permissions": ["read", "write", "admin"],
  "profile": {
    "theme": "dark",
    "notifications": {
      "email": true,
      "sms": false
    }
  }
}

Serialization: `JSON.stringify()`

To send your JavaScript object data across the network, you must first convert it into a JSON string. This process is called **serialization**. JavaScript gives us a built-in tool for this: JSON.stringify().

const user = { name: "Alex", id: 123 };
const jsonString = JSON.stringify(user);
// jsonString is now '{"name":"Alex","id":123}'

`JSON.stringify()` is powerful and has two optional arguments: a `replacer` and `space`.

• The `replacer` Argument: This can be an **array of keys** to whitelist, or a **function** to modify values as they are stringified.
• The `space` Argument: This is for **pretty-printing**. Passing a number (like `2`) or a string (like `'\t'`) will format the output with indentation and newlines, making it human-readable.

// Using all arguments
const data = { id: 1, user: "dev", secret: "xyz" };

// 1. Replacer as an array
const whitelisted = JSON.stringify(data, ["id", "user"]);
// '{"id":1,"user":"dev"}' (secret is gone)

// 2. Space argument for pretty-printing
const pretty = JSON.stringify(data, null, 2);
// {
//   "id": 1,
//   "user": "dev",
//   "secret": "xyz"
// }

If you try to stringify an object with `undefined`, a `function`, or a `Symbol`, those properties will be silently **omitted**.

Deserialization: `JSON.parse()`

When you receive data from an API, it arrives as a JSON string. To use it in your JavaScript code, you must convert it back into an object. This is called **deserialization** (or simply "parsing"), and we use JSON.parse().

This method is **strict**. If the string is not perfectly-formed JSON (e.g., it has a trailing comma or single-quoted keys), it will throw a `SyntaxError`. You should **always** wrap `JSON.parse()` in a `try...catch` block.

const jsonString = '{"id":123,"name":"Alex"}';

try {
  const userObject = JSON.parse(jsonString);
  console.log(userObject.name); // "Alex"
} catch (error) {
  console.error("Failed to parse JSON:", error);
}

`JSON.parse()` also has an optional second argument: a **`reviver` function**. This function is called for every key/value pair as it's parsed, allowing you to transform values on the fly. The most common use case is to convert date strings back into `Date` objects.

const data = '{"name":"event","date":"2025-10-26T10:00:00Z"}';

const obj = JSON.parse(data, (key, value) => {
  // Check if the value is a string and looks like a date
  if (key === 'date') {
    return new Date(value); // Return a Date object
  }
  return value; // Return all other values as-is
});

console.log(obj.date.getFullYear()); // 2025

Where You'll Use JSON Every Day

• APIs: This is the big one. When you use `fetch()` to get data from a server, you'll almost always use response.json(), which is just a shortcut for parsing the response body.
• `localStorage`: `localStorage` can only store strings. To save an object or array, you must stringify it, and parse it when you retrieve it.
• Configuration Files: Project configuration files like package.json or .eslintrc.json are all written in JSON.

Key Takeaway: JSON is the bridge between data (as a string) and JavaScript (as an object). Master the two methods, JSON.stringify() and JSON.parse(), and their strict syntax rules, and you'll have mastered the most fundamental part of modern web communication.