The for...of Loop

The for loop iterates by index: array[0], array[1], array[2]. Most of the time you do not care about the index — you just want each value. The for...of loop gives you exactly that.

for…of syntax

for (const item of iterable) {
  // body
}

On each iteration, item receives the next value from the array. No index variable. No array[i]. No off-by-one risk.

const tours = ['Cascade Ridge Hike', 'Summit Trail Run', 'Alpine Lakes Trek'];

for (const tour of tours) {
  console.log(tour);
}
// Cascade Ridge Hike
// Summit Trail Run
// Alpine Lakes Trek

const tour works here because the variable is re-declared fresh each iteration. You could use let, but const is conventional since you are not reassigning it.

for…of vs for

Use for when	Use for...of when
You need the index (array[i])	You only need each value
Counting up or down a range	Iterating every element of a collection
Using continue with index math	Iterating cleanly without position tracking

In practice, for...of covers the large majority of array iteration. Reach for the classic for loop when the index is genuinely needed.

for…of vs for…in

for...in iterates over the keys of an object (or the indexes of an array as strings). You may encounter it in older code:

for (const key in tours) {
  console.log(key);  // '0', '1', '2' — string indexes, not values
}

Do not use for...in to iterate arrays — the results are string indexes and the behavior is unreliable. Use for...of for arrays.

Arrays of objects

The real power of for...of shows when iterating an array of objects. Access each object’s properties with dot notation inside the loop:

const tours = [
  { name: 'Cascade Ridge Hike',  price: 149, available: true },
  { name: 'Summit Loop Trek',    price: 199, available: true },
  { name: 'Valley Floor Walk',   price: 99,  available: false },
];

for (const tour of tours) {
  console.log(`${tour.name} — $${tour.price}`);
}
// Cascade Ridge Hike — $149
// Summit Loop Trek — $199
// Valley Floor Walk — $99

Each iteration, tour is the entire object for that element. You can access any of its properties directly.

Combining loops with conditionals

An if statement inside a for...of loop filters items. This is the exact pattern behind the STO tour filter you will build in Module 07:

for (const tour of tours) {
  if (tour.available === true) {
    console.log(`Available: ${tour.name}`);
  }
}
// Available: Cascade Ridge Hike
// Available: Summit Loop Trek

The Valley Floor Walk is skipped because available is false. The loop processes every element; the conditional decides what to do with each one.

Exercise

const tours = [
  { name: 'Cascade Ridge Hike',  price: 149, available: true },
  { name: 'Summit Loop Trek',    price: 199, available: true },
  { name: 'Valley Floor Walk',   price: 99,  available: false },
];

// Log a formatted summary for each tour
for (const tour of tours) {
  const status = tour.available ? 'Available' : 'Sold Out';
  console.log(`${tour.name} | $${tour.price} | ${status}`);
}

// Log only available tours
console.log('--- Available Tours ---');
for (const tour of tours) {
  if (tour.available === true) {
    console.log(tour.name);
  }
}

Then add a fourth tour to the array and confirm both loops pick it up automatically.

Recap

• for (const item of array) gives you each value directly, without an index variable.
• Use for...of when you need each value; use the classic for when you need the index.
• Do not use for...in on arrays — it iterates string keys, not values.
• For arrays of objects, tour.name, tour.price, etc. are accessible directly inside the loop body.
• Combining for...of with an if condition filters elements — the pattern behind every list filter in this course.