Concept 11 of 13 Beginner ⏱️ 18 min

Objects

Learn how to organize related data together using objects with named properties.

Objects let you group related data together. Instead of having separate variables for a person's name, age, and email, you can store them all in one place with meaningful names.

What is an Object?

An object is a collection of key-value pairs. Each piece of data has a name (the key) and a value. Unlike arrays where you access items by number, objects use names.

📇

Real-World Analogy

Think of an ID card. It has labeled fields: Name: Alice, Age: 25, Photo: [image]. That's exactly what an object is—a collection of labeled pieces of information!

Creating Objects

You create an object using curly braces with key-value pairs:

let person = {
  name: "Alice",       // key: value
  age: 25,
  city: "New York"
};

// The keys are: name, age, city
// The values are: "Alice", 25, "New York"
name:
"Alice"
age:
25
city:
"New York"

Try It Yourself

Accessing Properties

There are two ways to access object properties:

Dot Notation (most common)

let person = { name: "Alice", age: 25 };

console.log(person.name);  // "Alice"
console.log(person.age);   // 25

Bracket Notation

console.log(person["name"]);  // "Alice"

// Useful when the key is in a variable
let key = "age";
console.log(person[key]);  // 25

// Or when the key has spaces/special characters
let data = { "full name": "Alice Smith" };
console.log(data["full name"]);  // "Alice Smith"

Modifying Objects

let car = {
  brand: "Toyota",
  year: 2020
};

// Change a property
car.year = 2021;

// Add a new property
car.color = "blue";

// Delete a property
delete car.year;

console.log(car);  // { brand: "Toyota", color: "blue" }

Methods: Functions in Objects

When a function is stored in an object, it's called a method. Methods let objects perform actions.

let calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3));       // 8
console.log(calculator.subtract(10, 4)); // 6

The "this" Keyword

Inside a method, this refers to the object itself:

let person = {
  name: "Alice",
  age: 25,
  introduce: function() {
    return "Hi, I'm " + this.name + " and I'm " + this.age;
  }
};

console.log(person.introduce());
// "Hi, I'm Alice and I'm 25"

Nested Objects

Objects can contain other objects:

let student = {
  name: "Bob",
  grades: {
    math: 90,
    english: 85,
    science: 92
  },
  address: {
    street: "123 Main St",
    city: "Boston"
  }
};

console.log(student.grades.math);      // 90
console.log(student.address.city);     // "Boston"

Objects vs Arrays

📋 Arrays

  • • Ordered lists
  • • Access by number index
  • • Best for lists of similar items
  • ["a", "b", "c"]

📦 Objects

  • • Named properties
  • • Access by key name
  • • Best for single entities with attributes

Common Object Operations

let person = { name: "Alice", age: 25, city: "NYC" };

// Get all keys
console.log(Object.keys(person));
// ["name", "age", "city"]

// Get all values
console.log(Object.values(person));
// ["Alice", 25, "NYC"]

// Check if property exists
console.log("name" in person);      // true
console.log("email" in person);     // false

// Loop through properties
for (let key in person) {
  console.log(key + ": " + person[key]);
}

Object Destructuring

A modern, convenient way to extract values from objects:

let person = { name: "Alice", age: 25, city: "NYC" };

// Old way
let name = person.name;
let age = person.age;

// Destructuring (modern way)
let { name, age, city } = person;

console.log(name);  // "Alice"
console.log(age);   // 25
console.log(city);  // "NYC"

Quick Quiz

Key Takeaways

  • Objects store data as key-value pairs
  • Access properties with dot notation (obj.key) or bracket notation (obj["key"])
  • Functions stored in objects are called methods
  • this inside a method refers to the object
  • Objects can be nested (objects inside objects)
  • Use Object.keys() and Object.values() to get lists of keys/values

What's Next?

Now let's learn about debugging—how to find and fix errors in your code when things don't work as expected!

Finished this concept?

Mark it complete to track your progress