Javascript "for...of" loop

The "for...of" loop works to iterate through iterable objects. The iterable objects are an Array, Set, Map, arguments object,..., etc. It executes a custom iteration with a javascript statement to execute each attribute value.

In ES6, a new statement for...of was introduced that iterates through an iterable object, such as:

Create the Array, String, Map, Set, and other iterable objects.
Arguments and NodeList are examples of array-like objects.
Objects created by the user that implement the iterator protocol.

Syntax

The following syntax shows the javascript "for...of" loop with the input arguments.

for (variable_name of iterable_objects) {
   //  javascript code
}

Parameters:

Variable name: the variable name shows the variable to iterate the value and display the object as an output. The variable can use in the javascript tag with let, var, and cost keywords.
Iterable_objects: it contains the array, sets, map, and data as an argument. This collection of the data shows as an output.

Return:

The loop shows array, set, or map data. In other words, the value of the iterable objects displays as an output.

Javascript "for...of" loop with the array

The array data uses the numerical and string value using the javascript function.

Examples

The examples show the javascript "for...of" loop with the array data with the iterable objects.

Example 1: The given example shows the basic for...of a loop with array values. We can see the console.log() function to display output values.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays iterable data in the console tab </p>
<script>
var marks = [41, 69, 52, 81, 75, 31, 15, 67];
console.log("JavaScript for...of  loop");
let i = 1;
for(const tut of marks) {	
  console.log(tut);
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Example 2: The given example shows the basic for...of a loop with array values. We can see the console.log() function to display output values. We can make multiplication operations with the array value.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var marks = [41, 69, 52, 81, 75, 31, 15, 67];
console.log("JavaScript for...of  loop");
for(let tut of marks) {
 var mark = tut * 3;
  console.log(mark+ " = " +tut+ " * 3");
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Example 3: The given example shows the text value of the "for...of" loop with the array. We can see the output in the console.log() function. Here, we can show array data with the index value of the data.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
let things = ['Earth', 'Sky', 'Water', 'Space'];
console.log("JavaScript for...of  loop");
for (const [index, thing] of things.entries()) {
    console.log(`${thing} is at index ${index}`);
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Javascript "for...of" loop with the string

The string displays with the variable and iterates the character index-wise using a JavaScript loop.

Examples

The example operates with the "for...of" loop with the string values using javascript.

Example 1: The given example shows the basic for...of a loop with string values. We can see the console.log() function to display output values. Here we can see the index value with the entire string object data and its iteration.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
var tutorial = 'Javatpoint';
console.log("JavaScript for...of  loop");
for(var tut of tutorial) {	
   console.log(tut); 
}
for(var tuts of tutorial) {	
   console.log(tutorial);
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Example2:

The following example shows the for...of loop with the single variable and multiple values. Here we can get the index value of the variable data.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
console.log("JavaScript for...of  loop");
const students = [
    {student: 'John',mark: 31},
    {student: 'Jane',mark: 42},
    {student: 'David',mark: 35},
    {student: 'Peter',mark: 29},
];
let total = 0;
for (const {mark} of students) {
    total += mark;
    console.log(`Marks: ${mark}`); 
}
console.log(`Total Marks: ${total}`); 
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Javascript "for...of" loop with the set

The set is similar to the array but uses the set method with the variable. We can use different values such as a number, string, etc.

Examples

The example operates with the "for...of" loop with the set values using javascript.

Example 1: The given example shows the for...of the loop with set values. Here we can see the numerical value with the entire set variable and its iteration.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
console.log("JavaScript for...of  loop with Set value.");
// define Set variable with numerical values 
const set_variable = new Set([24, 43, 11, 28, 36]);
// iterate the Set values
for (let x of set_variable) {
    console.log(x);
}
   console.log(set_variable);
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Example 2: The given example shows the for...of the loop with set values. Here we can see the string value with the entire set variable and its iteration.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
console.log("JavaScript for...of  loop with Set value.");
// define Set variable with text values 
const set_variable = new Set (['good', 'values', 'come', 'data', 'javascript']);
// iterate the Set values
for (let x of set_variable) {
    console.log(x);
}
   console.log(set_variable);
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Javascript "for...of" loop with the map

The map is a set of key and values pair of the data. We can use different values such as a number, string, and others.

Example

The example operates with the "for...of" loop with the map values using javascript. The given example shows the "for...of" loop with map values. Here we can see the numerical value with the entire set variable and its iteration.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
console.log("JavaScript for...of  loop with Map value.");
// define Map variable with values 
const map_variable = new Map();
// inserting elements with map
map_variable.set('name', 'Robin');
map_variable.set('age', '21');
map_variable.set('city', 'Delhi');
map_variable.set('Country', 'India');
// iterate the Map values
for (let [keys, values] of map_variable) {
    console.log(keys + '- ' + values);
  }
for (let index of map_variable) {
    console.log(map_variable);
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

JavaScript the "for...of" loop with the User Defined Iterator

User-defined iterators manually create iterator objects and use JavaScript for the "for...of" loop.

Example

The example operates with the "for...of" loop with the map values using JavaScript.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
console.log("JavaScript for...of  loop with User Defined iterator.");
// creating an iterable object
const iterableVar = {
// iterator method
[Symbol.iterator]() {
let condVar = 4;
return {
next() {
condVar++;
if (condVar === 5) {
return { value: '5', done: false};
}
else if (condVar === 6) {
return { value: '6', done: false};
}
else if (condVar === 7) {
return { value: '7', done: false};
}
else if (condVar === 8) {
return { value: '8', done: false};
}
return { value: '', done: true };
}
}
}
}
for (const vals of iterableVar) {
console.log(vals);
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

JavaScript the "for...of" loop with the generator

The generator is a simple iterator to create an iterator object and use JavaScript for the "for...of" loop.

The generator is used as a function and placed with the iterable object.

Example

The example uses JavaScript to operate with the "for...of" loop with the generator values.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript "for...of" loop </title>
</head>
<body>
<h2> JavaScript "for...of" loop </h2>
<p> Javascript loop displays object data using the loop </p>
<script>
console.log("JavaScript for...of  loop with Generator.");
// creating an iterable object
// generator function
function* generatorForFunction() {
yield 20;
yield 40;
yield 60;
}
const object_var = generatorForFunction();
// iteration using generator object
for (let value_index of object_var) {
console.log("Original Value:");
console.log(value_index);
console.log("Additio of the "+value_index+ " with 5");
console.log(value_index + 5);
}
</script>
</body>
</html>

Output

The given image shows an iterable object value as an output.

Difference between for...of and for...in loop in javascript

The following table shows differences between the "for...of" loop and the "for...in" loop.

For...of loop	For...in loop
It works for iterating the values using iterable objects.	It works for iterating the keys using iterable objects.
It is not used to iterate the object over the values of the iterable object.	It is used to iterate the object over the values of the iterable object.

Conclusion

The "for...of" loop develops to iterate the object values using the iterator like an array, set, map, and user-defined object. Using a loop for the object's values is easy and simple.

Next TopicJavaScript globalThis Object

← prev next →