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:

{
    "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:

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

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:

{
    "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:

{
    "name": "Saurabh"
}

Incorrect:

{
    'name': 'Saurabh'
}

Single quotes are not valid JSON syntax.

---

JSON Arrays

JSON can contain arrays.

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

Arrays are useful for representing lists of related data.

---

Nested JSON

JSON objects can contain other objects and arrays.

{
    "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.

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

const jsonData = JSON.stringify(user);

console.log(jsonData);

Output:

{"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.

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

const user = JSON.parse(jsonData);

console.log(user.name);

Output:

Saurabh

The basic relationship is:

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:

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:

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

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

For example:

console.log(user.name);

Output:

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:

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

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

Then retrieve it:

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:

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:

{
    "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.