Table of Contents
Preparing narration.
JavaScript objects and JSON look similar because JSON borrowed much of its shape from JavaScript object literals. They are still different things.
An object is a value your JavaScript program can work with. JSON is text that follows a data format. You use objects while the program runs, and you often use JSON when data crosses a boundary, such as between a browser and a server.
What a JavaScript object is
An object groups related values under property names. Those values can be strings, numbers, booleans, arrays, other objects, or functions. A function stored on an object is usually called a method.
Think of a cup in a program. It can have a color, material, and weight, and it can have an action such as wash(). The object stores both the information and, when needed, the behavior associated with it.
JavaScript
const cup = {
color: "black",
design: "cylindrical",
weight: 300,
material: "glass",
describe() {
return `${this.color} ${this.material} cup`;
},
};
console.log(cup.material); // glass
console.log(cup.describe()); // black glass cupThe object exists inside the JavaScript runtime. You can read a property, call a method, add a property, or remove one. Its syntax is part of the JavaScript language.
What JSON is
JSON stands for JavaScript Object Notation, but you do not need JavaScript to read or write it. It is a text format used to represent data in a way that different languages can exchange.
JSON supports strings, numbers, booleans, null, arrays, and objects made from those values. It does not support functions, comments, undefined, or JavaScript-specific objects such as Date directly.
JSON
{
"firstName": "John",
"lastName": "Doe",
"age": 30,
"isEmployed": true,
"address": {
"street": "123 Main St",
"city": "Anytown",
"zipCode": "12345"
},
"phoneNumbers": [
{ "type": "home", "number": "212 555-1234" },
{ "type": "office", "number": "646 555-5678" }
]
}Notice the quotation marks around every property name. JSON also forbids trailing commas. Those stricter rules make the text easier for another program to parse consistently.
How objects and JSON meet
When a JavaScript program needs to send an object through an HTTP request, it usually serializes the object into a JSON string.
JavaScript
const user = {
name: "Asha",
active: true,
};
const body = JSON.stringify(user);
console.log(body); // {"name":"Asha","active":true}The result of JSON.stringify() is a string, not an object. You can send that string as a request body or save it in a file.
When JSON comes back from a server, parse it before using it as an object.
JavaScript
const responseText = '{"name":"Asha","active":true}';
const parsedUser = JSON.parse(responseText);
console.log(parsedUser.name); // AshaJSON.parse() can throw a SyntaxError if the text is not valid JSON. If the text comes from an unreliable source, handle that failure instead of assuming the response is well formed.
The differences that matter
Behavior
JavaScript objects can contain functions and can participate in the language's runtime behavior. JSON stores data only. If you stringify an object with a method, the function is left out.
JavaScript
const account = {
name: "Asha",
greet() {
return `Hello, ${this.name}`;
},
};
console.log(JSON.stringify(account)); // {"name":"Asha"}Syntax
JavaScript object literals can use unquoted property names when they are valid identifiers, single or double quotes for strings, trailing commas, comments around the code, and computed properties. JSON requires double-quoted property names and string values, and it does not allow comments or trailing commas.
Types
JavaScript has values such as undefined, Date, Map, Set, BigInt, and functions. JSON has a smaller set of data types. During serialization, undefined and functions may disappear from an object, while a Date is converted to a string through its serialization behavior.
Purpose
Objects help your JavaScript code organize and manipulate live data. JSON helps systems exchange a snapshot of that data. A JSON response becomes an object only after your code parses it.
A small comparison
| JavaScript object | JSON |
|---|---|
| A runtime value in JavaScript | Text that follows a data format |
| Can contain methods | Cannot contain functions |
| Property names may be unquoted in an object literal | Property names must use double quotes |
| Can use JavaScript-only values | Supports a smaller set of data types |
| Read directly by JavaScript code | Parsed with JSON.parse() before normal object access |
Which one should you use
Use a JavaScript object while your application is reading, changing, or passing data around in memory. Use JSON when you need a portable text representation for an API response, request body, configuration file, or saved state.
Do not call JSON.stringify() just because a value looks like JSON. First check the boundary. If another function in the same program expects an object, converting it to text only creates extra work and can remove values that JSON cannot represent.
The sentence I keep coming back to is simple: an object is data your program can use, while JSON is text your program can exchange. Once you separate those two jobs, the similar-looking braces stop being confusing.
