The for...of loop in JavaScript is used to iterate over the values of iterable objects, such as arrays, strings, maps, sets, and other built-in iterable types. Unlike the for...in loop, which iterates over the property names (keys) of an object, for...of iterates over the actual values of an iterable object.

Syntax

The syntax of the for...of loop is:

for (let value of iterable) {
  // Code to execute for each value
}

How It Works

1. Iteration: The for...of loop iterates over each value in the iterable object.
2. Value Access: Each value is assigned to the loop variable (value), and the code block inside the loop is executed with this value.
3. Iterable Objects: Works with objects that have an iterable protocol, meaning they implement the Symbol.iterator method.

Example

Here’s a basic example of using a for...of loop to iterate over an array:

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

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

• Explanation:
  • for (let fruit of fruits) iterates over each value in the fruits array.
  • fruit is the value of each element in the array (e.g., 'apple', 'banana', 'cherry').
  • console.log(fruit) prints each value.

Key Points

1. Iterates Over Values: Unlike for...in, which iterates over property names, for...of iterates over the values of iterable objects.

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

   • Explanation: The loop directly accesses and logs each number in the numbers array.

2. Works with Strings: You can use for...of to iterate over characters in a string.

   let message = 'Hello';
   
   for (let char of message) {
     console.log(char); // Logs: H, e, l, l, o
   }
   

   • Explanation: Each character in the string is accessed and logged.

3. Supports Other Iterables: It can be used with other iterable objects like Map, Set, and arguments.

   Maps:

   let map = new Map([
     ['key1', 'value1'],
     ['key2', 'value2']
   ]);
   
   for (let [key, value] of map) {
     console.log(key + ': ' + value);
   }
   

   • Explanation: Iterates over the entries (key-value pairs) of the Map.

   Sets:

   let set = new Set([1, 2, 3, 4, 5]);
   
   for (let value of set) {
     console.log(value); // Logs: 1, 2, 3, 4, 5
   }
   

   • Explanation: Iterates over the values in the Set.

4. Does Not Work with Plain Objects: Plain objects are not iterable by default. Use Object.keys(), Object.values(), or Object.entries() for objects.

   let person = {
     name: 'Alice',
     age: 30
   };
   
   for (let value of Object.values(person)) {
     console.log(value); // Logs: Alice, 30
   }
   

   • Explanation: Object.values(person) provides an array of values to iterate over.

Summary

• Purpose: Iterates over the values of iterable objects.
• Iterates Over Values: Directly accesses and processes the values, not the keys.
• Compatible with Iterables: Works with arrays, strings, maps, sets, and other iterable objects.
• Not for Plain Objects: Use methods like Object.keys(), Object.values(), or Object.entries() for iterating over objects.