JSON Objects
A JSON object is a set of key-value pairs wrapped in curly braces, and it is the core building block for representing structured records.
Anatomy of a JSON Object
A JSON object starts and ends with curly braces { }. Inside, each entry is a key wrapped in double quotes, followed by a colon, followed by a value. Entries are separated by commas. Keys must always be quoted strings in JSON - unlike JavaScript object literals, unquoted keys are not valid JSON.
A simple JSON object
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const product = {
"id": "SKU-2201",
"name": "Wireless Mouse",
"price": 24.99,
"inStock": true
};
console.log(product.name); // "Wireless Mouse"
console.log(product["price"]); // 24.99
</script>
</body>
</html>Nested Objects
Values inside a JSON object are not limited to strings and numbers - a value can itself be another object. This lets you model real-world hierarchies, like an order that contains a customer, which contains an address, all in one document.
Nesting objects inside objects
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const order = {
"orderId": "ORD-9931",
"customer": {
"name": "Kabir Singh",
"address": {
"city": "Pune",
"zip": "411001"
}
},
"total": 149.5
};
console.log(order.customer.address.city); // "Pune"
</script>
</body>
</html>Dot Notation vs Bracket Notation
Once parsed into a JavaScript object, you can read a property with either dot notation (object.key) or bracket notation (object["key"]). Dot notation is shorter and more common, but bracket notation is required whenever the key is not a valid identifier - for example, if it contains spaces, starts with a digit, or is stored in a variable.
Dot notation vs bracket notation
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const report = {
"title": "Q1 Summary",
"total sales": 48200,
"2024": "fiscal year"
};
console.log(report.title); // works: valid identifier
// console.log(report.total sales); // SyntaxError - has a space
console.log(report["total sales"]); // 48200 - bracket notation required
const key = "2024";
console.log(report[key]); // "fiscal year" - dynamic key lookup
</script>
</body>
</html>- Object keys in JSON are always double-quoted strings
- Values can be strings, numbers, booleans, null, arrays, or nested objects
- Dot notation is concise but requires a valid identifier name
- Bracket notation works with any string, including dynamic variables
- Accessing a missing key returns undefined, not an error
Checking for Missing or Optional Keys
JSON objects are frequently optional in structure - an API might omit a field entirely rather than send null. Reading a property that does not exist returns undefined rather than throwing an error, which is why defensive checks like optional chaining (?.) are common when working with real-world JSON data.
Safe access with optional chaining
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const profile = { name: "Anaya", social: { twitter: "@anaya_dev" } };
console.log(profile.social?.twitter); // "@anaya_dev"
console.log(profile.social?.github); // undefined, no error
console.log(profile.contact?.email); // undefined, no error even though 'contact' is missing
</script>
</body>
</html>Exercise: JSON Objects
How is a single JSON object delimited?
