---
title: "What is the role of for-of loop in JS?"  
description: "What is the role of for-of loop in JS?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93746/what-is-the-role-of-for-of-loop-in-js  
category: "web application"  
tags: ["javascript", "web application development", "web development"]  
reading_time: 4 minutes  

---

# What is the role of for-of loop in JS?

What is the [role](https://www.mindstick.com/forum/2317/how-to-create-role-and-enable-role-in-mvc) of for-of loop in JS?

## Answers

### Answer by user

The for...of statement creates a loop iterating over iterable objects, including built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. **Syntax;**

```
for (variable of iterable) {
  statement
}
```

**variable** On each iteration a value of a different property is assigned to variable. variable may be declared with const, let, or var. **Iterable** Object whose iterable properties are iterated.

```
Array
const iterable = [10, 20, 30];
for (let value of iterable) {
  value += 1;
  console.log(value);
}
```

```
String
const iterable = 'boo';
for (const value of iterable) {
  console.log(value);
}
```

```
Map
const iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const entry of iterable) {
  console.log(entry);
}
for (const [key, value] of iterable) {
  console.log(value);
}
```

```
Set
const iterable = new Set([1, 1, 2, 2, 3, 3]);
for (const value of iterable) {
  console.log(value);
}
```

```
object
(function() {
  for (const argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);
```

\

### Answer by Ethan Karla

**for...of** loop is used to iterate value from array, map, set. This loop iterates the value one by one but in the **for...in** loop it is used to iterate keys from Array, Map, Set. But normally we use for...in in loop used in object iteration.

Syntax

```
for( variable of object){    statement.}
```

Example

```
<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <!-- Bootstrap CSS -->
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
    <title>Execption handling</title>
</head>
<body>
    <div class='container mt-5'>
        <h1 class='text-center'>for...of loop()</h1>
        <form class='mt-5'>
            <div class='form-group'>
                <input type='number' class='form-control' id='val1' placeholder='Enter value ' />
            </div>
            <div class='form-group'>
                <input type='button' id='btn1' class='btn btn-warning mx-3' value='Add Data' onclick='loadData()' />
                <input type='button' id='btn' class='btn btn-primary mx-3' value='Show Me' onclick='myFunc()' />
            </div>
        </form>
        <p id='res' class=''></p>
        <script type='text/javascript'>
            var ary=[];
            var i = 0;
            var para = document.getElementById('res');
            function myFunc() {
                if (ary.length === 0) {
                    para.innerHTML = 'Please add value !!!';
                    para.className = 'alert alert-danger';
                } else {
                    para.className = 'alert alert-success';
                    para.innerHTML = '';
                    for(let data of ary)
                        para.innerHTML +=data +', ';
                }
            }
            function loadData() {
                var a = document.getElementById('val1');
                var x = Math.floor((Math.random() * 10000) + 1);
                a.value = x;
                ary[i++] = x;
                para.className = 'alert alert-success';
                para.innerHTML = x+' Add in array';
            }
        </script>
    </div>
    <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</body>
</html>
```

Output

![What is the role of for-of loop in JS?](https://answers.mindstick.com/questionanswer/8a35325d-de5b-4f3e-99cc-be0f335d2b2b/images/ab477a81-05aa-4536-97c2-c37670d31c8e.png)\


---

Original Source: https://answers.mindstick.com/qa/93746/what-is-the-role-of-for-of-loop-in-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
