JavaScript lesson · 15 min

JavaScript Objects

Group related values into one structure and read properties with clear names.

Code runs locally in your browser

What you will practice

Create an object with named properties.
Read and update object properties.
Use objects to represent real things.

What this means

An object is a collection of named values. Each name is called a property, and each property stores a value.

Objects are useful when several values belong together. Instead of three separate variables for a user's name, role, and lesson count, one object can describe the whole profile.

You usually read object properties with dot notation, such as `profile.name`, because it is short and clear.

If this is your first time seeing this

An object groups details that belong to one thing. A user, product, lesson, and settings page can all be represented as objects.

Read `profile.name` as: from the `profile` object, get the `name` property.

Mini glossary

Object: A collection of named properties inside curly braces.
Property: One named value inside an object.
Dot notation: Reading a property with a dot, such as `profile.name`.

Example from everyday life

An object is like a contact card. The card has fields: name, phone, email, company. Each field has a label, so you do not confuse the person's email with their job title.

How it works step by step

The code creates a `profile` object with `name`, `role`, and `lessons` properties.
`profile.lessons += 1` reads the old lesson count, adds one, and writes the new count back.
The output uses dot notation to read the updated object values.
The object keeps related values together so the code is easier to pass around.

Where you will use this

A logged-in user can be represented as an object with id, name, role, and permissions.
A product card can be an object with title, price, image, and availability.
An API response often contains objects nested inside other objects.

Before you run the code

Objects are the main way JavaScript describes structured things. If a value has multiple named details, it is probably a good candidate for an object.

Clear property names make code easier to understand because the data explains itself.

Common beginner mistakes

Using an array when property names would make the data clearer.
Misspelling a property name, such as `profile.lessson` instead of `profile.lessons`.
Making objects too deeply nested before you understand the simpler shape.

JavaScript editor

const profile = {
  name: "Mira",
  role: "editor",
  lessons: 3
};

profile.lessons += 1;

console.log(`${profile.name} is an ${profile.role}`);
console.log(`Lessons completed: ${profile.lessons}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingReads named object properties

WaitingUpdates the lesson count

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Add an `email` property and print it.
Change the role from `editor` to `admin`.
Add a boolean property named `active` and print it.

Previous lesson Next lesson