JavaScript for...of Loop

The for...of loop is a construct in JavaScript designed for iterating over the values of iterable objects.

Why it is Used:

• Simplifies iteration over arrays, strings, maps, sets, and other iterable structures.
• Provides a cleaner syntax compared to the for...in loop, focusing on values rather than keys.
• Eliminates the need for manual index management, enhancing code readability.
• Works seamlessly with various iterable objects, ensuring consistency in iteration.

Syntax:

for (let variable of iterable) {
  // Code to be executed for each value in the iterable
}

• Variable: Represents the current value in each iteration.
• Iterable: The object with iterable properties or elements.

Examples:

Iterating Over an Array:

const numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
  console.log(number);
}

Extracting Unique Characters from a String:

const sentence = 'javascript is amazing';
let uniqueChars = new Set();

for (let char of sentence) {
  if (char !== ' ') {
    uniqueChars.add(char);
  }
}

console.log('Unique Characters:', [...uniqueChars].join(', '));

Iterating Over a Map:

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'Wonderland']
]);

for (let entry of myMap) {
  console.log(entry);
}

Filtering Even Numbers in an Array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let number of numbers) {
  if (number % 2 === 0) {
    console.log('Even Number:', number);
  }
}

 

Summary

The for...of loop simplifies the process of iterating over values in JavaScript, offering a cleaner syntax, enhanced readability, and versatility across various iterable objects. Its usage is prevalent in modern JavaScript development for a more elegant and efficient iteration experience.