JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write and easy for machines to parse and generate.

What is JSON?

JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.

• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays

JSON Syntax Rules

• Names must be strings (wrapped in double quotes).
• Values must be one of the following data types:
  • String (in double quotes)
  • Number
  • Object (JSON object)
  • Array
  • Boolean (true/false)
  • null

Example

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "HTML", "CSS"],
  "address": {
    "city": "Paramaribo",
    "country": "Suriname"
  }
}

JSON vs. JavaScript Objects

While JSON syntax is derived from JavaScript object notation, they are different:

1. JSON is text only.
2. JSON requires double quotes for all property names and string values.
3. JSON cannot contain functions or other complex JS types (like Date or undefined).

Using JSON in JavaScript

JSON.stringify()

Converts a JavaScript object into a JSON string.

const user = { name: 'Alice', age: 25 };
const jsonString = JSON.stringify(user);
// Result: '{"name":"Alice","age":25}'

JSON.parse()

Converts a JSON string back into a JavaScript object.

const json = '{"name":"Alice","age":25}';
const obj = JSON.parse(json);
console.log(obj.name); // Alice

Practical Example: Local Storage

One of the most common uses for JSON in frontend development is saving complex data (objects/arrays) to localStorage, which only accepts strings.

Saving Data

const userProfile = {
  username: 'FrontendDev',
  theme: 'dark',
  lastLogin: '2026-02-18',
};

// Convert to JSON string before saving
localStorage.setItem('user', JSON.stringify(userProfile));

Reading Data

const savedData = localStorage.getItem('user');

if (savedData) {
  // Convert JSON string back into a JS object
  const user = JSON.parse(savedData);
  console.log(user.username); // "FrontendDev"
}