Data & LogicBeginner⏱ 8 min05 / 12

Objects

Learn how to group related data and behavior together using JavaScript objects — the backbone of almost every real-world JS program.

Imagine filling out a form about a person: their name, age, and email. You could store each piece of information in a separate variable — personName, personAge, personEmail — but that quickly becomes chaotic. JavaScript objects let you bundle all of those related pieces under one roof, labeled and easy to find. Objects are the most-used building block in all of JavaScript, so getting comfortable with them early pays off every single day you write code.

Think of it like

Think of a business card

A business card has labeled fields: Name, Phone, Company. You look up the field name and read the value next to it. A JavaScript object works exactly the same way — it stores key-value pairs, where each key is a label and each value is the data stored at that label.

#Creating an Object Literal

Curly braces, colon-separated key-value pairs, comma between each entry
const person = {
  name: "Ada",
  age: 28,
  isSubscriber: true
};

console.log(person);

#Dot Notation vs Bracket Notation

Use dot notation by default; use brackets when the key is dynamic or has special characters
const person = { name: "Ada", age: 28 };

// Dot notation — clean and readable
console.log(person.name);    // "Ada"

// Bracket notation — key is a string
console.log(person["age"]); // 28

// Bracket notation when the key is in a variable
const field = "name";
console.log(person[field]);  // "Ada"

#Adding and Updating Properties

Assign to a key with dot or bracket notation to add or overwrite
const car = { make: "Toyota", year: 2020 };

car.year = 2023;    // update existing
car.color = "red"; // add new property

console.log(car);
Common mistake

const does not freeze the object

const prevents you from replacing the object with a totally new value (car = {} would throw an error), but it does not stop you from changing the properties inside it. Think of const as locking the box, not the items inside. The properties remain fully mutable.

#Methods and Nested Objects

A function stored on an object is a method; `this` refers to the object. Values can also be nested objects: `{ address: { city: "Berlin" } }` — access with `user.address.city`
const dog = {
  name: "Biscuit",
  greet() {
    console.log("Woof! My name is " + this.name);
  }
};

dog.greet();

#Destructuring Basics

Destructuring unpacks properties into standalone variables in one line
const movie = {
  title: "Inception",
  year: 2010,
  director: "Christopher Nolan"
};

const { title, year } = movie;

console.log(title); // "Inception"
console.log(year);  // 2010
Quick check

What does the following code log? ```js const pet = { type: "cat", lives: 9 }; pet.lives = 8; console.log(pet.lives); ```

Key takeaways

  • Objects store related data as key-value pairs inside curly braces `{}`.
  • Use dot notation (`obj.key`) by default; switch to bracket notation (`obj["key"]`) when the key is dynamic or has special characters.
  • You can freely add or update properties — even on `const` objects.
  • Functions stored on an object are called methods; use `this` inside a method to access the object's own properties.
  • Destructuring (`const { a, b } = obj`) pulls out properties into variables in one clean line.
Practice challenges
Test yourself · earn XP
0/4
Predict the output#1

The car is declared with const, but its properties get changed. What does this log?

predict-output
const car = { make: "Toyota", year: 2020 };
car.year = 2023;
car.color = "red";
console.log(car);
Fix the bug#2

This method should log "Woof! My name is Biscuit", but it doesn't. What's wrong?

fix-bug
const dog = {
  name: "Biscuit",
  greet() {
    console.log("Woof! My name is " + name);
  }
};
dog.greet();
Fill in the blank#3

Fill in the two variable names so this destructuring pulls the title and year properties out of the movie object.

const movie = { title: "Inception", year: 2010 };
const { ,  } = movie;
console.log(title, year);
Reorder the lines#4

Put these lines in order: create a person object, then add a new property, then read it back with bracket notation.

1
const person = { name: "Ada", age: 28 };
2
const field = "email";
3
person["email"] = "ada@mail.com";
4
console.log(person[field]);
Your turn
Practice exercise

Create a book object with the properties title (string), author (string), and pages (number). Add a method called summary that logs a sentence like: "Pride and Prejudice by Jane Austen — 432 pages.". Then destructure title and author from the object and log them separately.

Try it live — edit the code and hit Run to see the output:

solution.js · editable