For-Of Loop: Iterating Over Iterable Objects

In JavaScript, iterating over collections of data is a common task, whether you’re working with arrays, strings, or other types of iterable objects. The for-of loop provides a straightforward and elegant way to traverse these iterables.

Introduction to Iterables and the For-Of Loop

An iterable is an object that allows you to access its elements in a sequential manner, one at a time. Most built-in data structures in JavaScript, like Arrays, Strings, Maps, and Sets, are iterable. The for-of loop is specifically designed to iterate over iterable objects, making code more readable and concise.

I. Syntax of For-Of Loop

for (const item of iterable) {
  // code block to be executed
  • iterable: An object that has iterable properties.
  • item: A variable that represents the current item in the iteration.

II. Example: Iterating Over an Array

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

for (const fruit of fruits) {
// Output: apple
//         banana
//         cherry

Comparing For-Of with For-In and ForEach

While for-of, for-in, and forEach can all be used to iterate over elements, they have distinct differences and use cases.

I. For-Of

  • Designed for iterating over iterable objects like arrays, strings, maps, sets, etc.
  • Iterates over the values of the iterable.
  • Ideal for most cases where you need to iterate over elements of a collection directly.

II. For-In

  • Intended for iterating over the enumerable properties (keys) of an object.
  • Can iterate over properties that are not numbers, which might not be intended when iterating over array elements.
  • Not recommended for iterating over Array objects where the order of access is important or only element values are needed.

III. ForEach

  • An Array method that executes a provided function once for each array element.
  • Cannot be stopped or broken out of, unlike for-of or for-in loops.
  • Provides access to the element, index, and array itself within the callback function.

IV. Example: For-In vs For-Of

let arr = ['a', 'b', 'c'];

for (const index in arr) {
  console.log(index); // Outputs: 0, 1, 2 (indexes)

for (const value of arr) {
  console.log(value); // Outputs: 'a', 'b', 'c' (values)

V. When to Use Each

  • Use for-of when you need to iterate over the values in an iterable like an array or a string and you want a simple syntax.
  • Use for-in to iterate over the properties (keys) of an object or when you need to work with the keys directly.
  • Use forEach for arrays when you don’t need to break or continue the loop and want to execute a function on each element.