4.7 For...in Loops

So far you've seen three kinds of loops in JavaScript: the classic for loop, the while loop and the do...while loop. They all repeat an action several times, but JavaScript also offers two extra loops dedicated to walking over the properties of an object or the elements of an array. In this video we focus on the for...in loop.

Imagine an object person with two properties, name: "Toto" and age: 20, and we want to display all its properties. The for...in loop is exactly the right tool. Unlike the classic for, it has no initialisation, condition and increment parts. We just write: 

const person = { name: "Toto", age: 20 };
for (let key in person) {
  console.log(key);
}

On each iteration, key holds the name of one property of person. A simple console.log(key) prints name then age. To also print the value, we use the property accessor. There are two ways to read a property in JavaScript: dot notation (person.name) and bracket notation (person["name"]). The dot syntax only works when you know the property name at the time you write the code. Inside our loop, key changes at each iteration, so we must use bracket notation: console.log(key, person[key]) prints name Toto then age 20.

for...in with arrays

  • You can use for...in on an array — at each iteration the loop variable holds the index, not the value.
  • To get the element itself, read colors[index] with bracket notation.
  • It works, but it isn't the ideal way to iterate an array; the next video introduces for...of, which is a much cleaner choice.
const colors = ["red", "green", "blue"];
for (let index in colors) {
  console.log(index, colors[index]);
}

So for...in is mainly built to enumerate the properties of an object. Since ES6 we also have for...of, designed specifically to browse iterables like arrays — and that is what we'll explore in the next lesson.

Summary

This lesson covers for...in loops, a JavaScript construct designed to iterate through object properties and array indices. Unlike traditional for loops with three components, for...in loops use a simpler syntax where a key variable automatically takes on each property name or index. The lesson demonstrates how to access object values using both dot notation and bracket notation, explaining when bracket notation is necessary for dynamic property access. While for...in works with arrays, the lesson notes that for...of is the modern, preferred approach for array iteration.

Key points

  • for...in loops differ from traditional for loops by using a simple 'for (key in object)' syntax without initialization, condition, or increment components
  • Each iteration assigns a property name (or array index) to the key variable, enabling iteration through all object properties
  • Object properties can be accessed using dot notation (person.name) or bracket notation (person[key]), with bracket notation required for dynamic property names
  • The bracket notation is essential when the property name is calculated at runtime, as with the key variable in a for...in loop
  • for...in can iterate through array indices (0, 1, 2), but for...of is the recommended modern approach for iterating through array elements directly

FAQ

How does a for...in loop differ from a regular for loop?

A for...in loop uses a simplified syntax (for (key in object)) that automatically iterates through object properties or array indices, whereas a regular for loop requires explicit initialization, condition, and increment components.

When should I use bracket notation vs dot notation to access object properties?

Use dot notation (object.property) when you know the property name at write-time. Use bracket notation (object[key]) when the property name is dynamic or comes from a variable, such as when iterating through object properties with for...in.

Can I use for...in loops to iterate through arrays?

Yes, for...in iterates through array indices (0, 1, 2), allowing access to elements via bracket notation. However, the lesson recommends for...of as the modern, more intuitive approach for arrays (covered in the next lesson).