Differences Between for-in and for-of Statement in JavaScript

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);
}

Output

GeeksforGeeks
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.