JSON vs JavaScript Object

Why This Comparison Matters

At first glance, JSON and a JavaScript object look almost identical. Both use curly braces, both store key-value pairs, and both are used to represent data. This similarity often confuses beginners into thinking they are the same thing. They are not. Understanding the differences between JSON and a JavaScript object is essential for writing correct code and avoiding hard-to-find bugs.

What is a JavaScript Object?

A JavaScript object is a live data structure in memory. It exists inside a running JavaScript program. It can hold strings, numbers, arrays, functions, dates, and undefined values. Keys do not need to be wrapped in quotes.

const student = {
  name: "Harini",
  age: 22,
  greet: function() {
    return "Hello!";
  }
};

What is JSON?

JSON is a text-based data format. It is a plain string used to store or transfer data. It cannot hold functions, undefined values, or comments. All keys must be in double quotes.

{
  "name": "Harini",
  "age": 22
}

Notice that the function greet is not present in the JSON version because JSON does not support functions.

Side-by-Side Comparison

Feature	JavaScript Object	JSON
Nature	Live data structure in memory	Plain text / string format
Key Quotes	Optional — `name: "Raj"` is valid	Mandatory — must be `"name": "Raj"`
String Quotes	Single or double quotes allowed	Only double quotes allowed
Functions	Allowed as values	Not allowed — ignored or causes error
Undefined	Allowed as values	Not allowed — not a valid JSON type
Comments	Allowed using `//` or `/* */`	Not allowed
Trailing Commas	Allowed in modern JavaScript	Not allowed — causes parse error
Date Objects	Native Date objects allowed	Stored as ISO string only
NaN / Infinity	Allowed as values	Not allowed — invalid in JSON
Methods	Can have methods (functions as values)	Cannot have methods
Usage	Inside JavaScript programs	Storing, transferring, or sharing data

Key Syntax Differences with Examples

Unquoted Keys — Allowed in JavaScript, Not in JSON

// Valid JavaScript Object — unquoted keys are fine
const car = {
  brand: "Maruti",
  model: "Swift"
};

// Valid JSON — all keys must have double quotes
{
  "brand": "Maruti",
  "model": "Swift"
}

Functions — Allowed in JavaScript Object, Not in JSON

// Valid JavaScript Object — functions are allowed
const calc = {
  value: 100,
  double: function() {
    return this.value * 2;
  }
};

console.log(calc.double()); // Output: 200

// When stringified to JSON, the function is lost
const jsonStr = JSON.stringify(calc);
console.log(jsonStr); // Output: {"value":100}

Single Quotes — Allowed in JavaScript Object, Not in JSON

// Valid JavaScript Object — single quotes work
const person = {
  'name': 'Devika',
  'city': 'Mysore'
};

// Invalid JSON — single quotes cause a parse error
// { 'name': 'Devika' }  ← This will FAIL

Trailing Comma — Modern JavaScript Allows It, JSON Does Not

// Valid in modern JavaScript
const item = {
  title: "Pen",
  price: 10,  // trailing comma is OK in JS
};

// INVALID in JSON
// { "title": "Pen", "price": 10, }  ← parse error

undefined — Allowed in JavaScript, Not in JSON

// Valid JavaScript Object
const user = {
  name: "Ramesh",
  phone: undefined
};

// When stringified to JSON, undefined is removed
const jsonStr = JSON.stringify(user);
console.log(jsonStr); // Output: {"name":"Ramesh"}

Converting Between the Two

JavaScript provides two built-in methods to convert between a JavaScript object and a JSON string:

Direction	Method	Result
JS Object → JSON String	`JSON.stringify(obj)`	Returns a JSON text string
JSON String → JS Object	`JSON.parse(jsonStr)`	Returns a JavaScript object

// JavaScript Object to JSON String
const product = { name: "Notebook", price: 60 };
const jsonStr = JSON.stringify(product);
console.log(typeof jsonStr); // Output: string
console.log(jsonStr);         // Output: {"name":"Notebook","price":60}

// JSON String to JavaScript Object
const parsed = JSON.parse(jsonStr);
console.log(typeof parsed);   // Output: object
console.log(parsed.name);     // Output: Notebook

A Simple Mental Model

Think of a JavaScript object as a filled water bottle — it is a real, usable container. Think of JSON as the written recipe for making that water bottle — it is a text description. To use the water, the recipe must be followed to produce the actual bottle. That process is parsing. To share the recipe with someone, the bottle must be described in writing — that is stringifying.

Key Points to Remember

JSON is a text string; a JavaScript object is a live in-memory data structure
JSON keys must always be in double quotes; JavaScript object keys can be unquoted
JSON does not support functions, undefined, comments, or trailing commas
Use JSON.stringify() to convert a JavaScript object into JSON
Use JSON.parse() to convert JSON back into a JavaScript object
When a JavaScript object is stringified, functions and undefined values are silently dropped

Summary

JSON and JavaScript objects are closely related but serve different purposes. JavaScript objects are the working data structure inside a program — they are powerful and flexible. JSON is the portable text format used when data needs to leave the program — to go to a server, be saved to a file, or be sent across a network. Knowing when each one is in play, and how to convert between them, is a foundational skill in JavaScript development.

Previous lessons

Back to courses

Next lessons