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.
- Syntax
for (variable in object) statement
- Example
<!DOCTYPE html><html>ÂÂ<body>   Â<pid="demo"></p>   Â<script>       Âlet person = {           ÂfirstName: "neveropen",           ÂlastName: "<br>A Computer Science Portal for Geeks ",           Ârank: 43       Â};       Âlet userId = "";       Âlet i;       Âfor (i in person) {           ÂuserId += person[i];       Â}       Âdocument.getElementById("demo").innerHTML = userId;   Â</script></body>ÂÂ</html>
neveropen 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.
- Syntax
for (variable of iterable) { statement } - Example:
<!DOCTYPE html><html>ÂÂ<body>   Â<pid="demo"></p>   Â<script>       Âlet text = [           Â"neveropen",           Â" A Computer Science Portal for Geeks ",           Â"43"       Â];       Âlet userId = "";       Âlet 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.
neveropen A Computer Science Portal for Geeks 43
