# JSON in JavaScript – Working With Structured Data

Yesterday, I learned about `localStorage`, `sessionStorage`, and how `JSON.stringify()` and `JSON.parse()` allow us to store JavaScript objects and arrays.

Today, I explored **JSON (JavaScript Object Notation)** in more depth.

JSON is one of the most common formats used to exchange structured data between a frontend, backend, APIs, and databases.

Understanding JSON is essential for modern web development.

Let's dive in.

* * *

# What is JSON?

**JSON** stands for **JavaScript Object Notation**.

Despite its name, JSON is not limited to JavaScript. It is a lightweight, text-based format that can be understood by many programming languages.

Example:

```json
{
    "name": "Saurabh",
    "age": 22,
    "role": "Developer"
}
```

JSON represents data using **key-value pairs**, similar to JavaScript objects.

* * *

# JSON vs JavaScript Object

At first glance, they look almost identical.

JavaScript object:

```javascript
const user = {
    name: "Saurabh",
    age: 22
};
```

JSON:

```json
{
    "name": "Saurabh",
    "age": 22
}
```

One important difference is that JSON requires property names to be written using **double quotes**.

JSON is also a **text format**, while a JavaScript object is an actual JavaScript value.

* * *

# JSON Data Types

JSON supports several types of values:

*   String
    
*   Number
    
*   Boolean
    
*   Object
    
*   Array
    
*   `null`
    

Example:

```json
{
    "name": "Saurabh",
    "age": 22,
    "isLearning": true,
    "skills": ["HTML", "CSS", "JavaScript"],
    "address": {
        "city": "Mumbai"
    },
    "experience": null
}
```

These types allow JSON to represent structured information.

* * *

# JSON Strings

JSON strings must use **double quotes**.

Correct:

```json
{
    "name": "Saurabh"
}
```

Incorrect:

```text
{
    'name': 'Saurabh'
}
```

Single quotes are not valid JSON syntax.

* * *

# JSON Arrays

JSON can contain arrays.

```json
{
    "skills": [
        "HTML",
        "CSS",
        "JavaScript"
    ]
}
```

Arrays are useful for representing lists of related data.

* * *

# Nested JSON

JSON objects can contain other objects and arrays.

```json
{
    "name": "Saurabh",
    "skills": [
        "HTML",
        "CSS",
        "JavaScript"
    ],
    "address": {
        "city": "Mumbai",
        "country": "India"
    }
}
```

This allows JSON to represent complex data structures.

* * *

# JSON.stringify()

`JSON.stringify()` converts a JavaScript value into a JSON string.

```javascript
const user = {
    name: "Saurabh",
    age: 22
};

const jsonData = JSON.stringify(user);

console.log(jsonData);
```

Output:

```text
{"name":"Saurabh","age":22}
```

This is useful when we need to send or store JavaScript data as text.

* * *

# JSON.parse()

`JSON.parse()` does the opposite.

It converts a JSON string back into a JavaScript value.

```javascript
const jsonData = '{"name":"Saurabh","age":22}';

const user = JSON.parse(jsonData);

console.log(user.name);
```

Output:

```text
Saurabh
```

The basic relationship is:

```text
JavaScript Object
       ↓
JSON.stringify()
       ↓
JSON String
       ↓
JSON.parse()
       ↓
JavaScript Object
```

* * *

# Why Do We Need JSON?

JSON is commonly used when applications need to exchange data.

For example:

```text
Frontend
    ↓
    JSON
    ↓
Backend
    ↓
    JSON
    ↓
Frontend
```

A frontend application can send data to a server, and the server can respond with JSON.

This is extremely common when working with APIs.

* * *

# JSON and APIs

Suppose an API returns information about a user:

```json
{
    "id": 101,
    "name": "Saurabh",
    "role": "Developer"
}
```

JavaScript can receive this data and use it to update the webpage.

For example:

```javascript
console.log(user.name);
```

Output:

```text
Saurabh
```

This is one of the reasons JSON is so important in web development.

* * *

# JSON and localStorage

Yesterday, I learned how JSON connects with browser storage.

For example:

```javascript
const user = {
    name: "Saurabh",
    age: 22
};

localStorage.setItem(
    "user",
    JSON.stringify(user)
);
```

Then retrieve it:

```javascript
const storedUser = JSON.parse(
    localStorage.getItem("user")
);

console.log(storedUser.name);
```

So JSON acts as a bridge between JavaScript objects and string-based storage.

* * *

# JSON Limitations

JSON doesn't support every JavaScript data type.

For example, JSON does not directly represent:

*   Functions
    
*   `undefined`
    
*   Symbols
    
*   BigInt
    

Example:

```javascript
const user = {
    name: "Saurabh",
    greet: function () {
        console.log("Hello");
    }
};

console.log(JSON.stringify(user));
```

The function is not represented in the resulting JSON.

This is important to remember when converting JavaScript objects into JSON.

* * *

# Valid JSON Structure

JSON syntax is strict.

A valid JSON object looks like:

```json
{
    "name": "Saurabh",
    "age": 22,
    "isDeveloper": true
}
```

Important rules include:

*   Keys use double quotes
    
*   Strings use double quotes
    
*   Data is separated by commas
    
*   Objects use `{ }`
    
*   Arrays use `[ ]`
    
*   JSON does not allow comments
    

* * *

# JSON in Real-World Applications

JSON appears everywhere in modern development.

It is commonly used with:

*   REST APIs
    
*   Frontend applications
    
*   Backend servers
    
*   Configuration files
    
*   Browser storage
    
*   Databases
    
*   Authentication systems
    
*   Third-party services
    

Once I start working with APIs, JSON will become a regular part of my development workflow.

* * *

# Best Practices

✔ Remember that JSON is a text-based data format.

✔ Use `JSON.stringify()` to convert JavaScript values into JSON strings.

✔ Use `JSON.parse()` to convert JSON strings back into JavaScript values.

✔ Use valid JSON syntax with double quotes.

✔ Validate JSON when working with external data.

✔ Never assume external JSON data is always valid or safe—handle parsing errors appropriately.

* * *

# My Biggest Takeaway

Today, I understood why **JSON is one of the most important formats in web development**.

It provides a simple and standardized way for different parts of an application to exchange structured data.

The connection between JavaScript objects and JSON is now much clearer:

**JavaScript Object → JSON → API/Storage → JSON → JavaScript Object**

This prepares me for the next major part of my JavaScript journey: **working with APIs and fetching real data from the internet**.