Fundamentals 8 min read

What is JSON? The Complete Beginner's Guide

Everything you need to know about JSON — from basic syntax to real-world applications. Master JSON in under 10 minutes with practical examples.

#beginner #basics #tutorial #json-syntax

TL;DR

  • JSON = JavaScript Object Notation — a lightweight data format
  • Uses key-value pairs in curly braces: {"name": "value"}
  • Supports: strings, numbers, booleans, null, arrays, and objects
  • Human-readable AND machine-parseable — best of both worlds
  • The universal language for APIs and data exchange

What Even Is JSON?

JSON. Four letters that strike fear into junior developers everywhere. But here's the thing — JSON is stupidly simple once you stop overthinking it.

JSON stands for JavaScript Object Notation. It's basically just a way to write data that both humans and computers can read without wanting to throw their keyboards out the window.

Think of JSON like a really organized sticky note. You write down what something is (the key) and what it equals (the value). That's it. That's the whole thing.

basic-example.json
json
{
  "name": "John Doe",
  "age": 28,
  "isAwesome": true
}

See? Three pieces of information, crystal clear. The name is "John Doe", the age is 28, and yes, John is awesome. No ambiguity, no confusion.

Why Should You Care About JSON?

In the before times (the 90s), we had XML. It worked, but it was like writing a novel just to say "the sky is blue." Lots of angle brackets, lots of headaches.

Then Douglas Crockford came along and popularized JSON in the early 2000s. It was lighter, cleaner, and JavaScript could parse it natively. The web development world collectively said "finally" and never looked back.

Today, JSON is everywhere:

  • APIs — 99% of REST APIs speak JSON
  • Configuration files — package.json, tsconfig.json, you name it
  • Databases — MongoDB stores documents as JSON (technically BSON)
  • Local storage — Your browser's localStorage loves JSON
  • Data exchange — Microservices talk to each other in JSON

The JSON Syntax — Rules of the Game

JSON has a few rules. Break them and your parser will cry. Follow them and everything just works.

Rule 1: Everything is Key-Value Pairs

Every piece of data has a key (the name) and a value (the data). Keys are always strings in double quotes. Always.

key-value.json
json
{
  "key": "value",
  "anotherKey": "another value"
}

Rule 2: Use the Right Data Types

JSON supports exactly six data types. Not five, not seven. Six:

data-types.json
json
{
  "string": "Hello, World!",
  "number": 42,
  "decimal": 3.14159,
  "boolean": true,
  "nullValue": null,
  "array": [1, 2, 3],
  "object": { "nested": "data" }
}
Pro tip: JSON doesn't support undefined, functions, or dates directly. Dates are usually stored as strings in ISO format: "2024-11-28T12:00:00Z"
JSON Object { "name" : "Alice" , "age" : 25 , "active" : true } Key (string) String value Number Boolean JSON Array [ "apple" , "banana" , "cherry" ] Valid JSON Data Types String • Number • Boolean • null Object • Array
JSON data structure: Objects use curly braces , Arrays use square brackets [ ]

Rule 3: Double Quotes Only

This trips up JavaScript developers constantly. In JS, you can use single quotes, double quotes, or backticks. In JSON? Double quotes only.

quotes.json
json
// ❌ WRONG - Single quotes
{ 'name': 'John' }

// ❌ WRONG - No quotes on key
{ name: "John" }

// ✅ CORRECT - Double quotes
{ "name": "John" }

Rule 4: No Trailing Commas

JavaScript lets you leave a comma after the last item. JSON does not. The parser will reject your data faster than a bouncer at an exclusive club.

commas.json
json
// ❌ WRONG - Trailing comma
{
  "name": "John",
  "age": 28,
}

// ✅ CORRECT - No trailing comma
{
  "name": "John",
  "age": 28
}

Arrays and Objects — Nesting Data

Real-world data isn't flat. It's nested, complex, and sometimes looks like a bowl of spaghetti. JSON handles this with arrays and nested objects.

Arrays: Lists of Things

Use square brackets for ordered lists:

arrays.json
json
{
  "fruits": ["apple", "banana", "cherry"],
  "scores": [98, 87, 92, 100],
  "mixed": ["text", 42, true, null]
}

Nested Objects: Data Inside Data

Objects can contain other objects. It's objects all the way down:

nested.json
json
{
  "user": {
    "id": 1,
    "profile": {
      "name": "Alice",
      "email": "alice@example.com",
      "address": {
        "city": "San Francisco",
        "zip": "94102"
      }
    },
    "roles": ["admin", "editor"]
  }
}

Real-World JSON Examples

Enough theory. Let's look at JSON you'll actually encounter in the wild.

Example 1: API Response

This is what an API might return when you fetch user data:

api-response.json
json
{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "John Doe",
        "email": "john@example.com",
        "createdAt": "2024-01-15T09:30:00Z"
      },
      {
        "id": 2,
        "name": "Jane Smith",
        "email": "jane@example.com",
        "createdAt": "2024-02-20T14:45:00Z"
      }
    ],
    "pagination": {
      "page": 1,
      "perPage": 10,
      "total": 2
    }
  }
}

Example 2: Configuration File

Every Node.js project has a package.json:

package.json
json
{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "description": "Does awesome things",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}

Working with JSON in JavaScript

JavaScript has two built-in methods for JSON. Memorize them. Love them. They'll be your best friends.

JSON.parse() — String to Object

Converts a JSON string into a JavaScript object:

parse-example.js
javascript
const jsonString = '{"name": "Alice", "age": 25}';

// Parse the JSON string into an object
const user = JSON.parse(jsonString);

console.log(user.name);  // "Alice"
console.log(user.age);   // 25

JSON.stringify() — Object to String

Converts a JavaScript object into a JSON string:

stringify-example.js
javascript
const user = {
  name: "Bob",
  age: 30,
  skills: ["JavaScript", "Python"]
};

// Convert to JSON string
const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"Bob","age":30,"skills":["JavaScript","Python"]}'

// Pretty print with 2-space indentation
const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);
/*
{
  "name": "Bob",
  "age": 30,
  "skills": [
    "JavaScript",
    "Python"
  ]
}
*/
Try it yourself! Head over to our JSON formatter tool to practice formatting and validating JSON in real-time.

Common JSON Mistakes (And How to Avoid Them)

Here's a cheat sheet of the most common JSON errors:

Mistake Wrong Right
Single quotes {'name': 'John'} {"name": "John"}
Unquoted keys {name: "John"} {"name": "John"}
Trailing comma {"a": 1,} {"a": 1}
Comments {"a": 1 // comment} No comments allowed
Undefined {"a": undefined} {"a": null}

Frequently Asked Questions

Is JSON the same as JavaScript?

No! JSON is a data format that was inspired by JavaScript syntax, but it's language-independent. You can use JSON in Python, Java, Go, Ruby — basically any programming language.

Can JSON have comments?

Nope. Standard JSON doesn't support comments. This annoys everyone. Some tools support "JSON with comments" (JSONC), but it's not official JSON.

What's the maximum size of a JSON file?

JSON itself has no size limit. But your parser might. Most browsers can handle several megabytes without breaking a sweat. For huge files, consider streaming parsers.

JSON vs YAML — which is better?

YAML is more human-readable and supports comments. JSON is simpler and faster to parse. Use YAML for config files you'll edit by hand. Use JSON for data exchange between systems.

From My Experience: Why JSON Still Wins

After 10+ years of building APIs and data pipelines, I've worked with JSON in contexts ranging from tiny config files to processing billions of events daily. Here's what I've learned:

Real-world insight: The biggest JSON-related bugs I've encountered weren't syntax errors—they were semantic issues. Teams would change API response shapes without versioning, breaking downstream consumers. The fix? Always use JSON Schema validation in production, and document your contracts.

I've seen teams debate JSON vs Protocol Buffers vs MessagePack for months. Here's the truth: unless you're processing millions of messages per second, JSON's human-readability wins. The debugging time you save outweighs the microseconds you'd gain with binary formats.

That's actually why I built JSON-parser.net—I needed a fast, private tool for debugging JSON daily, and I got tired of pasting sensitive API responses into random online tools. Your data deserves better.

What's Next?

You now know more about JSON than most people who claim to "know JSON." Here's where to go from here:

Go forth and JSON with confidence. You've got this. 🚀

About the Author

AT

Adam Tse

Founder & Lead Developer · 10+ years experience

Full-stack engineer with 10+ years of experience building developer tools and APIs. Previously worked on data infrastructure at scale, processing billions of JSON documents daily. Passionate about creating privacy-first tools that don't compromise on functionality.

JavaScript/TypeScript Web Performance Developer Tools Data Processing