Explanation to the for ... of loop in JavaScript
The JavaScript "for ... of" loop explanation!
The for ... of loop was introduced in the ES6 versions of JavaScript, which allows for iterating the element of the iterable object.
In other words, the for ... of statement creates a loop iterating over iterable elements like string, array, or array-like elements that are NodeList, arguments, etc.
The syntax for the "for ... of" loop is:
for (const item of array) {
// statements
}
In the above code snippet:
- for , const, and of are the keywords.
- item - This is an individual element of the iterable object, each value of the iterable object is assigned to a variable and this variable can be declared with let/const/var keywords.
- array - In the place of array, we have to specify the iterable objects(array, string, NodeList, etc.) whose elements are iterated.
Example 1:
The for ... of loop with an array, arr is the name of the iterable object and item is the name of individual elements of the iterable object.
So will get 1, 2, 3, 4, and 5 as the result of this code snippet.
let arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item);
//1
//2
//3
//4
//5
}
Example 2:
The for ... of loop with a string, userName is the name of the iterable object, and char is the name of individual elements of the string.
So will get A, j, a, and y as the result of this code snippet.
let userName = "Ajay";
for (let char of userName) {
console.log(char);
//A
//j
//a
//y
}
Example 3:
The for ... of loop with arguments object, arguments is the name of the iterable object, and arg is the name of individual elements of the arguments object.
So will get 10, 20, 30, 40, and 50 as the result of this code snippet.
let sum = function (...values) {
for (let arg of arguments) {
console.log(arg);
// 10
// 20
// 30
// 40
// 50
}
}
let values = [10, 20, 30, 40, 50];
sum(...values);
Example 4:
Now we are going to iterate the elements of the NodeList, this is the HTML code for the document.
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
The for ... of loop with NodeList, divElementsis the name of the iterable object, and div is the name of individual elements of the arguments object.
let divElements = document.querySelectorAll("div");
console.log(divElements);
for (let div of divElements) {
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.margin = "20px";
}
Here is the output for this code with the DOM collection of NodeList.
I hope you learn a lot from this article if yes then share this article with your audience, and ask your doubt in the comment box.
Also if you want to read Twitter threads then do not forget to follow me on Twitter as well.