JSON — The Data Format You Use Every Day

If you do any web development, you can't avoid JSON. API responses come back as JSON. Config files are JSON. LocalStorage stores JSON. It's the lingua franca between frontend and backend.

The Basics

JSON (JavaScript Object Notation) is a text format for storing and exchanging data. Despite the name, it's language-agnostic — Python, Java, Go, C#, Rust, they all use it.

The structure is straightforward:

{
  "name": "Jane Park",
  "age": 28,
  "skills": ["TypeScript", "React", "Node.js"],
  "employed": true,
  "address": null
}

Curly braces {} for objects, square brackets [] for arrays. Keys must be wrapped in double quotes. That's the biggest difference from JavaScript object literals — JS allows { name: "Jane" } but JSON requires { "name": "Jane" }.

Six Data Types

JSON supports exactly six types:

Type	Example	Notes
String	"hello"	Double quotes only
Number	42, 3.14, -1	Integer, float, negative
Boolean	true, false	Lowercase only
null	null	Absence of value
Object	{ "key": "value" }	Key-value pairs
Array	[1, 2, 3]	Ordered list of values

What's not here: undefined, functions, Date objects, NaN, Infinity. When you JSON.stringify something containing these, they either disappear or become null.

JSON.stringify({ a: undefined, b: NaN, c: Infinity })
// '{"b":null,"c":null}'
// `a` (undefined) is removed entirely

JSON and APIs

In the REST world, JSON is the de facto standard. You send it, you receive it.

// sending data
const response = await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Jane", email: "jane@example.com" }),
});

// receiving data
const data = await response.json();

Forgetting the Content-Type: application/json header is a surprisingly common mistake. Some servers won't parse the body as JSON without it.

JSON vs Other Formats

JSON vs XML

XML came first. Here's the same data in both:

<user>
  <name>Jane Park</name>
  <age>28</age>
</user>

{
  "name": "Jane Park",
  "age": 28
}

JSON is more compact — XML's opening and closing tags add a lot of overhead. That's why web APIs migrated almost entirely to JSON. XML still lives on in SOAP services, RSS feeds, and SVG.

JSON vs YAML

YAML is technically a superset of JSON — all valid JSON is valid YAML.

name: Jane Park
age: 28
skills:
  - TypeScript
  - React

Config files tend to use YAML. Kubernetes manifests, GitHub Actions workflows, Docker Compose — all YAML. It's easier for humans to read and write. JSON is better for machines to parse and exchange.

JSON vs TOML

TOML is a config-file-specific format. Rust's Cargo.toml is the most well-known example.

[database]
host = "localhost"
port = 5432

Clean for flat configs, but deeply nested structures get awkward fast.

Common Mistakes

Trailing commas. A comma after the last item causes a parse error. JavaScript objects allow it; JSON does not.

{
  "a": 1,
  "b": 2,  // ← this comma breaks parsing
}

Single quotes. JSON only accepts double quotes. {'name': 'test'} is not valid JSON.

Comments. JSON has no comment syntax. No //, no /* */. This is annoying for config files, which is why JSONC (JSON with Comments) exists — VS Code's settings.json uses it.

Large numbers. JSON numbers are parsed as IEEE 754 floating point. Integers larger than 9007199254740991 (2^53 - 1, i.e. Number.MAX_SAFE_INTEGER) can lose precision. The workaround is to pass them as strings. That's why Twitter's API provides IDs as both "id": 12345 and "id_str": "12345".

Practical Tips

Pretty-printing with JSON.stringify. The third argument controls indentation.

JSON.stringify(data, null, 2);
// outputs with 2-space indentation

The replacer function. The second argument lets you filter or transform values.

JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined; // strip passwords
  return value;
});

JSON.parse reviver. Transform values during parsing.

JSON.parse(text, (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});

Useful for converting date strings to Date objects, since JSON has no native date type.

JSON Schema

JSON Schema defines the structure of JSON data — similar to TypeScript interfaces but for raw data validation.

{
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 }
  },
  "required": ["name"]
}

It's used for API documentation, config file validation, and code generation. The autocomplete you get when editing JSON files in VS Code? That's JSON Schema at work.

Debugging JSON

When an API dumps a giant single-line response, reading it raw is painful. Browser dev tools format it automatically, and jq is the go-to CLI tool. For quick checks in the browser, a JSON Formatter lets you paste it in and see it properly indented, with syntax errors highlighted instantly.

# jq is your best friend on the command line
curl -s https://api.example.com/users | jq .

# extract specific fields
cat response.json | jq '.data[] | {name, email}'

At the end of the day, JSON is simple. Curly braces, square brackets, double quotes. Get those three right and you've got the fundamentals. The rest you pick up by using it.