Differences Between for-in and for-of Statement in JavaScript
Last Updated :
20 Nov, 2024
The for..in loop is designed for iterating over an object's keys or property names, making it useful when accessing each property in an object. Although it can also be used to iterate over the indices of an array. Conversely, the for..of loop is intended to iterate directly over values in iterable collections like arrays, strings, Maps, or Sets.
1. for-in loop
The JavaScript for-in 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
JavaScript
let person = {
firstName: "GeeksforGeeks",
lastName: "A Computer Science Portal for Geeks",
rank: 43
};
let userId = "";
let i;
for (i in person) {
userId += person[i];
console.log(userId);
}
OutputGeeksforGeeks
GeeksforGeeksA Computer Science Portal for Geeks
GeeksforGeeksA Computer Science Portal for Geeks43
2. 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
}
JavaScript
let text = [
"GeeksforGeeks",
" A Computer Science Portal for Geeks ",
"43"
];
let userId = "";
let i;
for (i of text) {
userId += i;
console.log(userId);
}
OutputGeeksforGeeks
GeeksforGeeks A Computer Science Portal for Geeks
GeeksforGeeks A Computer Science Portal for Geeks 43
Difference between for-in and for-of Statements
| Feature | for...in | for...of |
|---|
| Purpose | Iterates over enumerable properties of an object | Iterates over iterable objects like arrays, strings, maps, etc. |
| Type of Values | Returns the keys (property names) | Returns the values of the iterable |
| Use Case | Best for iterating over object properties | Best for iterating over array elements or any iterable |
| Common Usage | for (let key in obj) {...} | for (let value of iterable) {...} |
| Works with Arrays | Yes, but iterates over index keys (not recommended) | Yes, iterates directly over array values |
| Works with Objects | Yes, iterates over properties | No, unless object implements an iterable (e.g., Map) |
| Prototype Properties | Yes, includes inherited properties if not filtered | No, only iterates over actual iterable elements |
| Symbol Iterators | Does not use [Symbol.iterator] | Uses [Symbol.iterator], so it works with any iterable |
| Best Practice | Use with objects only | Use with arrays, strings, maps, sets, etc. |
Also, JavaScript supports different kinds of loops:
Similar Reads
Difference between forEach and for loop in Javascript In JavaScript, both forEach and for loops are used to iterate over arrays or collections, but they differ in usage and behavior. forEach is a higher-order function that simplifies iteration with built-in array methods, while for loops offer more control, flexibility, and broader application.For Loop
4 min read
Difference Between for...in and Object.keys() in JavaScript The for...in and Object.keys() in JavaScript are used to iterate over the properties of an object. While they might seem similar at first glance they have distinct usage, behavior, and characteristics. This article will explore these differences in detail.These are the following topics that we are g
3 min read
Difference between forEach() and map() loop in JavaScript The forEach() and map() methods in JavaScript are used to iterate over arrays, but they serve different purposes. forEach() executes a provided function once for each array element without returning a new array, while map() transforms elements and returns a new array.JavaScript forEach() JavaScript'
4 min read
What is the difference between find() and filter() methods in JavaScript ? In this article, we will see the difference between the find() and filter() methods in javascript. JavaScript find() method: The find() method is used to find all the descendant elements of the selected element. It finds the element in the DOM tree by traversing through the root to the leaf. Syntax:
2 min read
Difference Between Array.from and Array.of in JavaScript JavaScript provides various methods for creating and manipulating arrays, two of which are Array.from and Array.of. These methods are part of the ECMAScript 6 (ES6) specification and offer distinct ways to create arrays. Understanding the differences between these two methods is important for effici
3 min read