JS-062
JavaScript diagram about for...of: a visual example of Iterate over array values
Beginner5 min~5 min read#for-of#loop#array

for...of

Iterate over array values

Goal

Learn to iterate over every element in an array using a for...of loop.

Explanation

  • for...of iterates over the values in an array.
  • On each iteration, you receive one element.
  • You do not need to work with indexes.
  • It is one of the simplest ways to iterate over an array.
  • for...of is often used to display or process data.

Analogy

Imagine a basket of fruit. You take one fruit, then the next, and then another until you have looked at all of them.

Code

const fruits = [
  "Apple",
  "Banana",
  "Orange"
];

for (const fruit of fruits) {
  console.log(fruit);
}

Result: Apple Banana Orange

Common mistake

Beginners sometimes expect to receive an index. for...of returns the values themselves, not their positions.

Remember

  • ✦ for...of works with values.
  • ✦ You do not need to use indexes.
  • ✦ The loop visits every element.

Quick Quiz

What does for...of provide when used with an array?

Resources