Object literal
The most common way to create an object: { key: value }.
Platform under construction
Objects
Objects group related data under named properties. They are the foundation for structured JavaScript state.
const profile = {
name: "User A",
role: "editor",
active: true
};
console.log(profile.name);
Objects, Prototypes & Classes
An object is a named collection of related values.
Objects are used when values belong together. Instead of separate variables for name, role and status, one object can describe one profile, setting, response or UI state.
Object properties are usually read with dot notation. Bracket notation is useful when the property name is stored in a variable or contains characters that dot notation cannot use.
Objects are reference values. Assigning an object to another variable does not copy the whole object. It copies a reference to the same object.
Property
A named value stored on the object.
Dot access
profile.name reads a simple property name.
Reference value
Two variables can point to the same object.
Examples
Object code becomes clear when shape, state and behavior are visible.
Grouped state with clear names
const panelState = {
title: "Dashboard",
open: true,
selectedTab: "overview"
};
Loose variables with hidden relation
const title = "Dashboard"; const open = true; const selectedTab = "overview"; // These values belong together, but the structure does not show it.
Code patterns
Reusable examples for quick reference.
These patterns focus on the pieces developers actually reuse: object literals, methods, constructors, prototypes, getters, copying, classes and inheritance.
Create an object literal
Group related values under clear property names.
const profile = {
name: "User A",
role: "editor"
};
Read with dot notation
Use dot notation for normal property names.
const status = { label: "Ready" };
console.log(status.label);
Read with bracket notation
Use brackets when the key is dynamic.
const key = "label";
const status = { label: "Ready" };
console.log(status[key]);
Copy with spread
Create a shallow copy before changing state.
const original = { active: false };
const updated = { ...original, active: true };
console.log(updated);
Rules that matter
Model data deliberately before adding behavior.
Objects are where JavaScript programs start to model real application state. Good object shape makes later functions, classes and UI updates much easier to maintain.
Use objects for related data
If values describe one thing, group them.
Use meaningful property names
A property name should explain the value.
Use brackets for dynamic keys
Dot notation cannot use variables as property names.
Remember objects are references
Changing one reference changes the same underlying object.
Copy before state updates
Spread can create a shallow copy for simple state changes.
Avoid huge mixed objects
Split objects when one structure starts doing too many jobs.
Production thinking
Object design decides how understandable the rest of the code can be.
Why does this matter?
Objects let code model real data instead of passing loose values around. That makes functions easier to call and state easier to inspect.
Accessibility
UI state objects can keep labels, expanded states and selected values together, which helps accessible rendering stay consistent.
Production note
Production code should treat shared objects carefully, especially when passing state between modules or components.
SEO note
Objects often hold page metadata, link data and structured content. Clear object shape makes rendered output easier to trust.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add an email property and render it.
- Create an updated copy with active set to false.
- Read one property with bracket notation.
Practice assignment
Do this before moving to the next topic.
- Create an object with at least three properties.
- Read one property with dot notation.
- Copy the object with spread and change one property.
Try it yourself
Render a profile object
Self-check
Before you continue, prove that you understand Objects.
Object-oriented JavaScript becomes much easier when you can explain where the data lives, where the method is found and which object receives this.
- Can you explain why objects group related data?
- Can you explain dot notation versus bracket notation?
- Can you explain why objects are reference values?
- Can you explain what a shallow copy is?
- Can you explain when an object has too many responsibilities?