Objects are JavaScript's way of grouping related data and behavior into a single labeled entity using key-value pairs. This lesson covers creating object literals, reading and writing properties with dot and bracket notation, defining methods, nesting objects, and the critical detail that objects are copied and compared by reference rather than by value.
1JS Objects | JavaScript Tutorial - In-Depth Guide Part 1
Welcome to JavaScript Objects. While arrays are for lists, objects are for details. They allow you to bundle related data and functions into a single, labeled entity.
// Objects: The Entity Architecture2JS Objects | JavaScript Tutorial - In-Depth Guide Part 2
We create objects using curly braces {}. Inside, we store data as Key-Value pairs, separated by colons and commas.
const user = {
name: 'Neo',
age: 25,
isAdmin: true
};3JS Objects | JavaScript Tutorial - In-Depth Guide Part 3
Dot Notation is the standard way to access properties. It' It's clean, efficient, and makes your code read like a sentence.
console.log(user.name); // 'Neo'
user.age = 26; // Updating value4JS Objects | JavaScript Tutorial - In-Depth Guide Part 4
Bracket Notation [] is the ' 'power mode'. Use it when your keys have spaces, or when you want to use a variable as a property name.
const key = 'name';
console.log(user[key]); // 'Neo'
console.log(user['isAdmin']); // true5JS Objects | JavaScript Tutorial - In-Depth Guide Part 5
Objects can store Methods'—functions that define the behavior of the object. Methods are just properties that hold a function.
const user = {
name: 'Neo',
greet() {
console.log('Hello!');
}
};
user.greet();6JS Objects | JavaScript Tutorial - In-Depth Guide Part 6
Objects can be nested! A property can hold another object, allowing you to model complex real-world relationships with precision.
const user = {
profile: {
id: 1,
theme: 'dark'
}
};7JS Objects | JavaScript Tutorial - In-Depth Guide Part 7
Watch the render. See how the object graph expands in memory and how dot notation allows for deep navigation through nested properties.
8JS Objects | JavaScript Tutorial - In-Depth Guide Part 8
Deleting properties: Use the ' 'delete' keyword. This completely removes the key and the value from the object's structure.
delete user.isAdmin;
console.log(user.isAdmin); // undefined9JS Objects | JavaScript Tutorial - In-Depth Guide Part 9
Shorthand properties: If your variable name matches your key name, you can just write it once. This is a very common ES6 pattern.
const name = 'Neo';
const user = { name }; // Same as { name: name }10JS Objects | JavaScript Tutorial - In-Depth Guide Part 10
Objects are passed by ''Reference'. This means if you copy an object variable, both variables point to the SAME data in memory.
const userA = { name: 'Neo' };
const userB = userA;
userB.name = 'Trinity';
console.log(userA.name); // 'Trinity'!11JS Objects | JavaScript Tutorial - In-Depth Guide Part 11
You
console.log('Entity Protocol: Complete');12JS Objects | JavaScript Tutorial - In-Depth Guide Part 12
Object mastery achieved! Now let Take a moment to really visualize how this interacts with the rest of your application state. When you grasp this underlying architecture, everything else in modern web development starts to make perfect sense
13Step-by-Step Breakdown
Welcome to JavaScript Objects. While arrays are for lists, objects are for details. They allow you to bundle related data and functions into a single, labeled entity.
We create objects using curly braces {}. Inside, we store data as Key-Value pairs, separated by colons and commas.
Dot Notation is the standard way to access properties. It' It's clean, efficient, and makes your code read like a sentence.
Checkpoint: Given const car = {color: 'red' }, how do you access the color property using Dot Notation?
- →car.color
- →car['color'] (Bracket)
Bracket Notation [] is the ' 'power mode'. Use it when your keys have spaces, or when you want to use a variable as a property name.
Objects can store Methods'—functions that define the behavior of the object. Methods are just properties that hold a function.
Objects can be nested! A property can hold another object, allowing you to model complex real-world relationships with precision.
Watch the render. See how the object graph expands in memory and how dot notation allows for deep navigation through nested properties.
Checkpoint: True or False: You can add a new property to an existing object after it was created.
- →True
- →False
Deleting properties: Use the ' 'delete' keyword. This completely removes the key and the value from the object's structure.
Shorthand properties: If your variable name matches your key name, you can just write it once. This is a very common ES6 pattern.
Objects are passed by ''Reference'. This means if you copy an object variable, both variables point to the SAME data in memory.
You
Checkpoint: Which notation is required if a property name contains a space (e.g.,
- →Dot Notation
- →Bracket Notation
Object mastery achieved! Now let Take a moment to really visualize how this interacts with the rest of your application state. When you grasp this underlying architecture, everything else in modern web development starts to make perfect sense
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Objects Modeling UI State Should Map Cleanly to ARIA Attributes
When an object drives a table or list rendered in the DOM (e.g. a row object with an `id`, `label`, and `isSelected` field), make sure the property that represents the accessible name or header role (like a row's label) is rendered as real markup — such as `<th scope="row">` — rather than only as a plain `<td>`, so assistive technology can announce it correctly.
SEO Implications
- 1
Structured Data on a Page Is Represented as JavaScript Objects Before It's Serialized to JSON-LD
When you build SEO structured data (Product, Article, FAQ schemas), you typically construct it as a plain JavaScript object and then `JSON.stringify` it into a `<script type="application/ld+json">` tag — getting the object's property names and nesting exactly right is what determines whether search engines can parse the schema.
Best Practices
Use Object.freeze() to Prevent Accidental Mutation of Shared Config Objects
Because objects are passed by reference, a shared configuration or constants object can be mutated from anywhere that holds a reference to it; `Object.freeze()` makes an object's own properties read-only, causing silent no-ops (or errors in strict mode) on attempted writes.
Clone an Object Before Mutating It If the Original Must Stay Unchanged
Since assignment only copies the reference, use `{ ...original }` (shallow) or `structuredClone(original)` (deep) to create an independent copy before making changes you don't want reflected back on the original object.
Frequent Bugs
Mutating an object passed into a function unexpectedly changes the caller's original object.
Objects are passed by reference, so modifying a property inside the function mutates the same object the caller is holding. If the function shouldn't have side effects, spread the object into a new copy (`const copy = { ...obj }`) before modifying it.
`JSON.stringify(obj) === JSON.stringify(obj2)` is used to compare two objects and gives wrong results when key order differs.
JSON.stringify serializes keys in insertion order, so two objects with identical data but properties added in a different order produce different strings. Compare specific properties directly, or use a deep-equality utility instead of string comparison.
Real-World Examples
Modeling an API Response as a Nested Object
A user profile page needed to render a user's basic info alongside their nested address and preferences data returned from an API. The response was consumed directly as a nested object, with dot notation used to reach deeply nested fields for display.
const user = {
name: 'Ada',
address: { city: 'London', zip: 'EC1A' },
preferences: { theme: 'dark', notifications: true }
};
console.log(user.address.city); // 'London'
console.log(user.preferences.theme); // 'dark'