Dhananjay Kumar

In JavaScript to iterate over the values of an array, map, object, etc. use the for…of loop. In a specified order, it iterates over the set of values of an iterable object such that array.

It would be best if you use a for…of loop for looping. You must have used the for…in loop to iterate over an array or object literals as shown below,

---

let Product = ['Pen', 'Pencil', 'Notebook', 'Eraser', 'Books'];
 
for (let p in Product) {
    console.log(p); // index;
    console.log(Product[p]); // value
}

---

Or you can use it to iterate enumerable properties of an object as below,

---

let Product = {
    Id: 1,
    Title: 'Pen',
    Price: 1000
}
 
for (let p in Product) {
    console.log(p); // keys as string
    console.log(Product[p]); // values of properties 
}

---

So far, it looks good to use, however, keep in mind that the for…in loop iterates in an arbitrary order and consider key as a string. So, it may happen that in some scenarios, the for…in loop never iterates over a newly added item, or in the case of an array, it may iterate not in a fixed order.

It would be best if you avoided for…in.

Then, what should you use? ES6 introduces a new for loop to iterate called for…of loop. The for…of loop iterates over a set of values produced over an iterator.

You can use the for…of loop to iterate values of an array as shown below,

---

let Product = ['Pen', 'Pencil', 'Notebook', 'Eraser', 'Books'];
 
for (let p of Product) {
    console.log(p); // Pen, Pencil,...
}

---

So, here you might have noticed the significant difference between the for…in loop and for…of loop is

• The for…in iterates over the key and indexes of the array
• The for…of iterates over the values of the array.

The significant characteristics of the for…of loop are that it iterates over the iterable objects.  So, it can work with

• Arrays
• Set
• Strings
• Map
• Generators
• TypedArray

Keep in mind that any object can become an iterable object if it adheres to the iterable protocol.

You can iterate over a string using the for…of loop as shown below,

---

const fullname = "Dhananjay Kumar";
for (let f of fullname) {
    console.log(f);
}

---

You can also a mutable variable or a constant with the for…of loop as shown below,

---

let Product = ['Pen', 'Pencil', 'Notebook', 'Eraser', 'Books'];
let p;
for (p of Product) {
    console.log(p); // Pen, Pencil,...
}
 
p = "notebook";
console.log(p); // notebook

---

You can also use the for…of loop to iterate over-index and value of an array as shown below,

---

let Product = ['Pen', 'Pencil', 'Notebook', 'Eraser', 'Books'];
 
for (const [index, value] of Product.entries()) {
    console.log(index, value);
}

---

You can also use for…of loop with the arguments object inside a function as below,

---

function Foo() {
    for (let a of arguments) {
        console.log(a);
    }
}
 
Foo(3, 6, 8, 23, 67, 90);

---

Another important point about the for…of loop is that instead of declaration, you can also use the assignment as the loop variable.

---

let Product = ['Pen', 'Pencil', 'Notebook', 'Eraser', 'Books'];
 
const pObj = {};
for (pObj.data of Product) {
    console.log(pObj.data);
}

---

So, the significant difference between the for…in loop and for…of loop is,

• The for…in loop iterates over enumerable properties in an arbitrary order.
• The for…of loop iterates over an iterable object’s value in the order specified in the object.

I recommend you to use the for…of loop for iterations. I hope you find this post useful. Thanks for reading.