Explain the differences between for(..in) and for(..of) statement in JavaScript. - GeeksforGeeks

31 Jan, 2020
Often in a JavaScript script, we iterate over some objects of few built-in classes like Arrays, Dictionaries, Strings, Maps, etc. We iterate the objects using loops. JavaScript supports different kinds of loops:
for loop
for (..in) loop
for (..of) loop
while loop
do-while loop
In this article, we will be learning about the difference between for (..in) and for (..of) Loops.
for (..in) loop: The JavaScript for (..in) statement loops through the enumerable properties of an object. The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor’s prototype.
Syntaxfor (variable in object)
  statement
for (variable in object)
  statement
Example<!DOCTYPE html><html>  <body>    <p id="demo"></p>    <script>        var person = {            firstName: "GeeksforGeeks",            lastName: "<br>A Computer Science Portal for Geeks ",            rank: 43        };        var userId = "";        var i;        for (i in person) {            userId += person[i];        }        document.getElementById("demo").innerHTML = userId;    </script></body>  </html>
<!DOCTYPE html><html>  <body>    <p id="demo"></p>    <script>        var person = {            firstName: "GeeksforGeeks",            lastName: "<br>A Computer Science Portal for Geeks ",            rank: 43        };        var userId = "";        var i;        for (i in person) {            userId += person[i];        }        document.getElementById("demo").innerHTML = userId;    </script></body>  </html>
Output: As you can see the for (..in) loop iterate over only the properties or the values of the dictionary object.GeeksforGeeks
A Computer Science Portal for Geeks 43for (..of) loop: This for (..of) statement lets you loop over the data structures that are iterable such as Arrays, Strings, Maps, Node Lists, and more. It calls a custom iteration hook with instructions to execute on the value of each property of the object.Syntaxfor (variable of iterable) {
  statement
}
Example<!DOCTYPE html><html>    <body>        <p id ="demo"></p>        <script>        var text = [            "GeeksforGeeks",            " A Computer Science Portal for Geeks ",             "43"            ];        var userId = "";        var i;        for (i of text) {        userId+=i;        }        document.getElementById("demo").innerHTML = userId;        </script>    </body></html>                    Output: As you can see the for (..of) loop iterate over only the content of the Array object.GeeksforGeeks A Computer Science Portal for Geeks 43My Personal Notes
arrow_drop_upSave
GeeksforGeeks
A Computer Science Portal for Geeks 43
for (..of) loop: This for (..of) statement lets you loop over the data structures that are iterable such as Arrays, Strings, Maps, Node Lists, and more. It calls a custom iteration hook with instructions to execute on the value of each property of the object.
Syntaxfor (variable of iterable) {
  statement
}

for (variable of iterable) {
  statement
}

Example<!DOCTYPE html><html>    <body>        <p id ="demo"></p>        <script>        var text = [            "GeeksforGeeks",            " A Computer Science Portal for Geeks ",             "43"            ];        var userId = "";        var i;        for (i of text) {        userId+=i;        }        document.getElementById("demo").innerHTML = userId;        </script>    </body></html>                    
<!DOCTYPE html><html>    <body>        <p id ="demo"></p>        <script>        var text = [            "GeeksforGeeks",            " A Computer Science Portal for Geeks ",             "43"            ];        var userId = "";        var i;        for (i of text) {        userId+=i;        }        document.getElementById("demo").innerHTML = userId;        </script>    </body></html>                    
Output: As you can see the for (..of) loop iterate over only the content of the Array object.GeeksforGeeks A Computer Science Portal for Geeks 43
GeeksforGeeks A Computer Science Portal for Geeks 43
CSS-Misc
HTML-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills