'for of' Loop

Introduction to 'for of' Loop

The `for of` loop is a new feature introduced in ECMAScript 6 (ES6) for iterating over iterable objects in JavaScript. It provides an easy and concise way to iterate through the values of an array or other iterable objects.

The syntax of the `for of` loop is as follows:

for (let variable of iterable) {
  // code to be executed

}

The `variable` represents the current value being iterated, and `iterable` represents the array or iterable object to be looped over. Inside the loop, you can perform any desired operations using the current value.

Let's look at an example to see how the `for of` loop works:

let fruits = ['apple', 'banana', 'cherry'];
 
for (let fruit of fruits) {
  console.log(fruit);

}

In this example, the `for of` loop iterates through each value of the `fruits` array, and the current value is assigned to the `fruit` variable. The loop then logs each fruit to the console. 

The output will be:

apple
banana
cherry

One important thing to note is that the `for of` loop does not provide access to the index or the entire array. If you need to access the index, you can use the `for in` loop or a traditional `for` loop instead.

Using the for of Loop with Strings

In addition to arrays, the `for of` loop can also be used to iterate over strings. When used with a string, the loop iterates over each character of the string.

Let's see an example:

let message = 'Hello';
 
for (let char of message) {
  console.log(char);

}

In this example, the `for of` loop iterates over each character of the `message` string, and the current character is assigned to the `char` variable. The loop then logs each character to the console. The output will be:

H
e
l
l
o

Using the for of Loop with Other Iterables

The `for of` loop can also be used with other built-in JavaScript iterables such as maps and sets. It iterates over each element of the iterable in the order that they appear.

Let's see an example using a map:

let colorMap = new Map([
  ['red', 'FF0000'],
  ['green', '00FF00'],
  ['blue', '0000FF']
]);
 
for (let [color, code] of colorMap) {
  console.log(`${color}: ${code}`);

}In this example, the `for of` loop iterates through each key-value pair of the `colorMap` map, and the current key is assigned to the `color` variable, while the current value is assigned to the `code` variable. The loop then logs each key-value pair to the console. The output will be:

red: FF0000
green: 00FF00

blue: 0000FF

Summary

The `for of` loop is a new feature introduced in ECMAScript 6 that provides an easy and concise way to iterate through the values of an array or other iterable objects in JavaScript. It can be used with arrays, strings, maps, and other iterable objects. However, it does not provide access to the index or the entire array.

Key Takeaways:

• The `for of` loop is used to iterate over iterable objects in JavaScript.

• The syntax of the `for of` loop is `for (let variable of iterable)`.

• It can be used with arrays, strings, maps, and other iterable objects.

• The `variable` represents the current value being iterated, and `iterable` represents the array or iterable object to be looped over.

• The `for of` loop does not provide access to the index or the entire array.