## What is JSON?
JSON (JavaScript Object Notation) is a text format for storing and exchanging data. Almost every web API uses JSON to send data back and forth. If you build anything on the web, you will use JSON constantly.
It looks like JavaScript objects but is actually just text that any programming language can read and write.
## What JSON Looks Like
```JSON
{
"name": "Alice",
"age": 28,
"email": "alice@email.com",
"isActive": true,
"hobbies": ["reading", "coding", "gaming"]
}
```
Clean, readable, and easy to understand. Keys are strings (in quotes), values can be strings, numbers, booleans, arrays, or nested objects.
## Why JSON is Everywhere
**Simple**: Easy for humans to read and write
**Universal**: Every programming language can parse JSON
**Lightweight**: Less verbose than XML
**Web Native**: Works perfectly with JavaScript
**API Standard**: REST APIs almost always return JSON
## JSON vs JavaScript Objects
They look similar but are different:
**JavaScript Object**:
```javascript
const user = {
name: "Alice", // No quotes on keys
greet() { console.log("Hi") } // Can have functions
}
```
**JSON**:
```
{
"name": "Alice" // Keys must be quoted, no functions allowed
}
```
JSON is stricter. Only data, no functions or methods.
## Using JSON in JavaScript
**Parse** (text to object):
```javascript
const jsonText = '{"name": "Alice", "age": 28}'
const user = JSON.parse(jsonText)
console.log(user.name) // "Alice"
```
**Stringify** (object to text):
```javascript
const user = { name: "Alice", age: 28 }
const jsonText = JSON.stringify(user)
console.log(jsonText) // '{"name":"Alice","age":28}'
```
## Data Types in JSON
**String**: `"hello"`
**Number**: `42` or `3.14`
**Boolean**: `true` or `false`
**Array**: `[1, 2, 3]`
**Object**: `{"key": "value"}`
**Null**: `null`
That is it. Only these six types. Simple and clean.
## Nested JSON
JSON can have objects inside objects:
```javascript
{
"user": {
"name": "Alice",
"address": {
"city": "New York",
"zip": "10001"
}
},
"posts": [
{"title": "First Post", "likes": 10},
{"title": "Second Post", "likes": 25}
]
}
```
Access nested data:
```javascript
const data = JSON.parse(jsonText)
console.log(data.user.address.city) // "New York"
console.log(data.posts[0].title) // "First Post"
```
## Real-World Usage
**APIs**: Backend sends JSON, frontend receives it
```javascript
const response = await fetch("/api/users")
const users = await response.json()
```
**Config Files**: Store settings in JSON
```json
{
"apiUrl": "https://api.example.com",
"timeout": 5000,
"features": ["auth", "payments"]
}
```
**Storage**: Save data in browser
```javascript
localStorage.setItem("user", JSON.stringify(user))
const user = JSON.parse(localStorage.getItem("user"))
```
## Common Mistakes
**Trailing Commas**: Not allowed in JSON
```json
// WRONG
{"name": "Alice", "age": 28,}
// CORRECT
{"name": "Alice", "age": 28}
```
**Single Quotes**: Must use double quotes
```
// WRONG
{'name': 'Alice'}
// CORRECT
{"name": "Alice"}
```
**Functions**: Cannot store functions
```json
// WRONG
{"greet": function() { }}
// CORRECT - only data
{"greeting": "Hello"}
```
## Pretty Printing
Make JSON readable with formatting:
```javascript
// Compact (one line)
JSON.stringify(data)
// Pretty (indented)
JSON.stringify(data, null, 2)
```
Output:
```json
{
"name": "Alice",
"age": 28
}
```
Much easier to read!
## JSON in Other Languages
**Python**:
```python
import json
data = json.loads(json_text) # Parse
text = json.dumps(data) # Stringify
```
**Java**:
```java
// Using Gson library
Gson gson = new Gson();
User user = gson.fromJson(jsonText, User.class);
```
**PHP**:
```php
$data = json_decode($jsonText);
$text = json_encode($data);
```
Every language has JSON libraries.
## The Bottom Line
JSON is the universal language of web APIs. Master JSON parsing and creation, and you can work with any web service. It is simple, widely supported, and essential for modern development.
