Lesson 3: Arrays and Objects

One value at a time only gets you so far. Real data is collections — a list of products, a user's profile with multiple fields. Arrays and objects are how JavaScript organizes that, and you'll use both constantly, in nearly every script you write.

Arrays: ordered lists

const fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]); // "apple" — arrays start counting at 0
console.log(fruits.length); // 3

An array is an ordered list. Each item has a position, called its index, starting from 0 — not 1. This trips up nearly every beginner at least once.

Common array methods

Method	Does
`.push(item)`	Adds an item to the end
`.pop()`	Removes the last item
`.includes(item)`	Returns true/false if the array contains it
`.indexOf(item)`	Returns the position of an item, or -1 if not found

fruits.push("mango");
console.log(fruits); // ["apple", "banana", "cherry", "mango"]

Looping through an array

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// the modern, more readable way:
fruits.forEach(function(fruit) {
  console.log(fruit);
});

.forEach() runs a function once for every item in the array automatically — no manual index tracking needed. It's the standard way to loop through arrays in modern JavaScript.

Objects: labeled data

const user = {
  name: "Alex",
  age: 25,
  isLearning: true
};

console.log(user.name); // "Alex" — dot notation
console.log(user["age"]); // 25 — bracket notation, same result

Where an array uses numbered positions, an object uses named keys. Use objects whenever data has labeled fields — a user profile, a product with a name/price/description — rather than a simple ordered list.

Changing and adding properties

user.age = 26;           // update an existing property
user.email = "a@x.com";  // add a brand new property

Arrays of objects: the pattern you'll use constantly

const users = [
  { name: "Alex", age: 25 },
  { name: "Sam", age: 30 },
  { name: "Jo", age: 22 }
];

users.forEach(function(u) {
  console.log(u.name + " is " + u.age);
});

This combination — a list of objects — is how almost all real-world data looks: a list of products, a list of comments, a list of users. Getting comfortable with this pattern is one of the most valuable things in this whole course.

Try it yourself

exercise

Create an array of 3 objects, each representing a book with title and author properties. Use .forEach() to log each one as "Title by Author".

Level up: filtering data

exercise 2

Using the users array from above, write a loop that only logs users who are 25 or older. This combines everything so far: arrays, objects, and the if statement from Lesson 2.

✓ quick check — 3 questions

1. What index does the first item in an array have?

0 1 -1

2. Which is best for data with labeled fields, like a user's name and age?

An array An object A function

3. What does .forEach() do?

Removes items from an array Sorts an array alphabetically Runs a function once for every item in an array

what's next

Lesson 4 is where things get exciting: the DOM. You'll take everything so far and use it to actually change what's on the screen, in response to what a user does.

bottom line

Arrays store ordered lists, objects store labeled data, and arrays of objects — combining both — is the shape of most real-world data you'll ever work with. .forEach() is your go-to for looping through any array.