JavaScript Objects
You can already pack logic into functions and keep outer names alive with closures. Real pages also need structured data: a product’s title, price, and stock belong together. An object is one value that holds several named pieces.
What an object means
An object stores related data as properties. Each property has a key (the name) and a value (the data). Beginners usually start with an object literal: curly braces { } with key: value pairs inside. You do not need a class for this first step.
Four pieces to watch
📊 Literal, key, value, and access
| Piece | Role | Beginner cue |
|---|---|---|
| object literal | the { … } value you assign to a variable |
one bag of related data |
| key | the property name on the left of : |
how you label the piece |
| value | the data on the right of : |
string, number, boolean, … |
| access | reading or writing with . or [ ] |
how you reach one piece later |
If you can point to those four, you can explain almost every first object example. The surprise for many learners is not the braces — it is that one variable now carries several named fields.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
Curly braces build the object
book is one value. Inside it, title and pages are properties. Commas separate pairs. After the closing }, the object is ready to use. Logging book shows the whole bag in the console.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
Dot notation reaches one field
Write the object name, a dot, then the key: book.title. That expression is the string "Maps". Dot notation is the everyday way to read a known property name. The key must be a valid identifier shape for this form.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
Brackets also reach a field
book["title"] is the same value as book.title here. Brackets take a string (or an expression that becomes a key). Use them when the key is stored in a variable, or when the name is not a simple identifier. For fixed names, dot is usually clearer.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
You can update a property later
Assignment to book.pages changes that field. The object stays the same bag; one value inside it is new. Reading again shows 140. Later lessons dig deeper into adding and listing properties — here the goal is a clear first update.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
Related fields travel together
name and price describe one shop item. Keeping them on one object beats two loose globals that can drift apart. When you pass item to a function or put it on the page, both fields move as one unit.
Show an object field on the page
Build a small product object, read one property, and put that string into a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
The paragraph shows Lamp — 25. Change only the object’s name or price, refresh, and read the new line. Next lesson covers object properties in more depth — how keys behave, and how to work with them day to day.
Practice steps
- Create an object with two properties using a literal.
- Log one property with dot notation.
- Log the same property with bracket notation and a string key.
- Change one property and log the new value.
- Build an
itemwithnameandprice; log both fields. - In the HTML demo, change only the object values, refresh, and read the paragraph.
Frequent slip-ups
- Treating an object like a numbered list (that is closer to an array, later in the course)
- Forgetting quotes around string values —
title: Mapswithout quotes is wrong - Mixing up the key and the value when explaining the literal
- Expecting methods,
this, or deep property tools in this first page — those come later - Creating a separate global for every field instead of one object
Summary
- An object groups related values as named properties
- A literal uses
{ key: value, … } - Dot notation (
obj.key) reads a known property - Bracket notation (
obj["key"]) reads with a string key - You can assign to a property to update it later
- Related fields stay together when the object moves
- Page updates can show strings built from object fields
- Next: object properties — working with keys in more depth
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top