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.

When apps share data, they often use JSON (JavaScript Object Notation), which is a text format based on object-style key-value pairs. Format and convert JSON to see how JSON is structured.

πŸ“‡

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 β€” one line per property
let personName = person.name;
let personAge = person.age;
console.log(personName);  // "Alice"
console.log(personAge);   // 25

// Destructuring (modern way) β€” pull out several at once.
// The names on the left must match the keys in the object.
let { name, age, city } = person;

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

Quick Quiz

Question 1 of 3Score: 0/0

Objects Quiz

How do you access the "name" property of a person object?

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