menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:for-of loop

menu

The for...of loop in JavaScript is an iteration statement introduced in ECMAScript 6 (ES6) that simplifies the process of looping through the elements of iterable objects, such as arrays, strings, maps, sets, and more. It is designed to make iteration over collections of values easier and more intuitive. Here's a deep explanation of the for...of loop:

Basic Syntax:

The for...of loop has a straightforward syntax:

javascriptfor (const element of iterable) {
  // Code to be executed for each element
}
  • element: A variable that represents the current element in each iteration.

  • iterable: An iterable object, such as an array, string, map, set, etc., from which you want to extract elements.

Example:

Let's look at an example of using a for...of loop to iterate over an array of fruits:

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

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

In this example, the loop iterates over each element in the fruits array, and fruit represents the current element in each iteration.

Advantages of for...of:

  1. Cleaner and more readable code: The syntax is simple and intuitive, making your code easier to understand.

  2. Works with various data structures: for...of can be used with a wide range of iterable objects, including arrays, strings, sets, maps, and custom iterables.

  3. No need for index tracking: You don't need to keep track of array indices or iterators; the loop handles that for you.

  4. Avoids common loop pitfalls: It eliminates off-by-one errors and simplifies code maintenance.

Limitations:

  1. No access to indices: Unlike traditional for loops, for...of loops don't provide direct access to the index of the current element. If you need the index, you might want to use a for...in loop or a combination of for...of and Array.prototype.entries()

  2. Cannot be used with plain objects: for...of cannot be used directly to iterate over the properties of plain objects (non-iterable). For objects, you should use for...in to iterate over keys or use Object.values(obj) to iterate over values.

Iterating Over Strings:

The for...of loop is particularly useful when dealing with strings because it iterates over individual characters in the string:

javascriptconst text = 'Hello';

for (const char of text) {
  console.log(char);
}

This code will output each character of the string: 'H', 'e', 'l', 'l', 'o'.

Iterating Over Maps and Sets:

for...of can also be used to iterate over the elements of maps and sets:

javascriptconst mySet = new Set([1, 2, 3]);

for (const element of mySet) {
  console.log(element);
}
javascriptconst myMap = new Map([
  ['name', 'Alice'],
  ['age', 30]
]);

for (const [key, value] of myMap) {
  console.log(key, value);
}

Custom Iterables:

You can create your own iterable objects by defining an iterator function that provides the logic for iteration. This allows you to use for...of with your custom data structures.

Example:

javascriptconst myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const num of myIterable) {
  console.log(num);
}

In summary, the for...of loop in JavaScript is a powerful and versatile construct for iterating over the values of iterable objects, making it easier to work with arrays, strings, maps, sets, and custom iterable data structures. Its simplicity and readability make it a preferred choice for many common iteration tasks in modern JavaScript code.

1280 x 720 px