JSON Introduction: The Data Format of the Web

JSON, short for JavaScript Object Notation, is the most widely used data interchange format on the modern web. Every time you refresh a social feed, check the weather in an app, or submit a form on a website, there is a very good chance JSON is carrying that data between the client and the server. In this opening lesson of our JSON tutorial series, you will learn what JSON is, why it became the default language of APIs, and what a real JSON document looks like.

What Is JSON?

JSON is a lightweight, text-based format for representing structured data. It was derived from JavaScript object literal syntax by Douglas Crockford in the early 2000s, but it is completely language independent. Practically every programming language, including Python, Java, C#, Go, Ruby, PHP, and Rust, ships with built-in or standard-library support for reading and writing JSON.

A JSON document represents data as name and value pairs and ordered lists. Here is a small but realistic example describing a user account:

json

{
  "id": 1042,
  "username": "ada_lovelace",
  "email": "ada@example.com",
  "isActive": true,
  "roles": ["admin", "editor"],
  "profile": {
    "fullName": "Ada Lovelace",
    "country": "UK"
  }
}

Even without any training, you can probably read this document and understand it. That human readability is one of the main reasons JSON won the format wars.

Why JSON Became the Standard

Before JSON, most systems exchanged data using XML, which is verbose and requires heavyweight parsers. JSON offered several practical advantages:

Compact: JSON has minimal markup, so payloads are smaller and faster to transfer.
Easy to parse: Browsers parse JSON natively with JSON.parse, and every language has a fast parser.
Readable: Developers can inspect and debug JSON payloads with nothing more than a text editor.
A natural fit for JavaScript: Since browsers run JavaScript, data arriving as JSON maps directly onto objects and arrays.

These qualities made JSON the default body format for REST APIs, configuration files such as package.json, NoSQL databases like MongoDB, and logging pipelines.

Where You Will Encounter JSON

Web APIs: Services like GitHub, Stripe, and OpenWeather return responses as JSON.
Configuration files: Tools such as npm, TypeScript, and VS Code store settings in JSON files.
Data storage: Document databases store records as JSON-like documents.
Messaging: Webhooks, queues, and event streams commonly serialize events as JSON.

A First Look at Structure

JSON is built from just two structures:

An object: an unordered collection of key and value pairs wrapped in curly braces { }.
An array: an ordered list of values wrapped in square brackets [ ].

Values can be strings, numbers, booleans, null, objects, or arrays. Because objects and arrays can nest inside each other, these two simple structures can describe almost any data you can imagine, from a shopping cart to an entire application state.

Trying It Yourself

Open your browser console and run the sample code attached to this lesson. It converts a JavaScript object into a JSON string and back again, which is the round trip you will perform constantly as a developer.

Key Takeaways

JSON stands for JavaScript Object Notation and is a text format for structured data.
It is language independent and supported by virtually every programming language.
JSON is the standard body format for web APIs, configuration files, and document databases.
Everything in JSON is built from objects, arrays, and a small set of value types.

Next up: JSON Syntax Rules, where we cover the exact grammar that makes a document valid JSON.