for…in vs for…of in JavaScript

Published in

Geek Culture

6 min readAug 25, 2021

For quite a while, I have been struggling to fully understand the differences between for…in and for…of. If you found this via Google or the dev.to feed, I can safely assume that you are probably wondering the same thing. for…in and for…of are the alternative of the for loop that we are all familiar with. However, for…in and for…of are used in different occasions depends on what you are looking for while the for loop we know can be used in basically in any situation.

We will first go over the examples/usages, then we’ll break down each of them.

Examples/Usages

👉🏻 for

const arr = [1, 2, 3, 4, 5]function printArr(arr) {
 for (let i = 0; i < arr.length; i++) {
 console.log(arr[i]);
 }
}console.log(printArr(arr));
// 1
// 2
// 3
// 4
// 5

👉🏻 for…in

const obj = { a: 1, b: 2, c: 3 }
function printObj(obj) {
 for (let prop in obj) {
 console.log(`prop: ${prop}`)
 console.log(`obj[prop]: ${obj[prop]}`)
 }
}console.log(printObj(obj));// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3
```

👉🏻 for…of

const arrOf = [1, 2, 3, 4, 5]
function printArrOf(arr) {
 for (let ele of arr) {
 console.log(ele);
 }
}console.log(printArrOf(arrOf));// 1
// 2
// 3
// 4
// 5

Now you saw how they are used, let’s break them down one by one!

Our Dear Best Friend, The `for` Statement

This basic for loop can be used anytime when we need iteration in anything.

Basic Syntax

for ([initialization]; [condition]; [final-expression]) {
 statement
}

The iteration usually happens inside the block (a.k.a {}). We would put multiple statements inside the block for the loop to be executed. You may use break, continue, etc. to continue or break the for loop based on the conditions.

Example with break

for (let i = 0;; i++) {
 console.log(i);
 if (i > 5) break;
}// Expected Output: 
// 0
// 1
// 2
// 3
// 4
// 5
// 6// Explanation: The loop breaks when i is larger than 5.

✨ Quick Note: All those expressions inside the parentheses are optional.

Example with continue

for (let i = 0; i < 10; i++) {
 if (i === 7) continue;
 else console.log(i);
}// Expected Output:
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 8
// 9// Explanation: if i is equal to 7, we will skip that i and move on to the next index.

`for…in`, Protagonist #1

for…in loop iterates over all enumerable properties of an object.

If you don’t know what enumerable is, I’ll do my best to explain what it is. Basically you can think of enumerable property is the key of the key-value pair in an object. It will also show up in the Object.keys() method. So if we look at our example from the section above…

const obj = { a: 1, b: 2, c: 3 }function printObj(obj) {
 for (let prop in obj) {
 console.log(`prop: ${prop}`)
 console.log(`obj[prop]: ${obj[prop]}`)
 }
}console.log(printObj(obj));// prop: a
// obj[prop]: 1
// prop: b
// obj[prop]: 2
// prop: c
// obj[prop]: 3

prop is the key in the key-value pair and that’s our enumerable properties. If you have basic understand on how to retrieve the value of an object, we treat the key like index in an array and put it in a square bracket 👉🏻 obj[prop], like this.

const obj = { 
 name: “Megan”, 
 age: “do the Math”, 
 role: “front-end developer” 
}for (const property in obj) {
 console.log(property);
}// Expected Output:
// name
// age
// role

So far, our examples are all in object, or {} (as array is also an object), it is not recommended/ good practice to use for…in to iterate over an array, where the index order is important.

Yes, array indexes are also enumerable properties but in integer. It behaves quite unpredictably if we use for…in to iterate an array. It is not guarantee that the elements are iterated in a specific order. Also, if you want to extend the array by assigning to an index that is beyond the current size of the array, it may not reflect the correct index. Therefore, for…of, forEach, or for loop with a numeric index is a better method to iterate an array. Check out the examples demonstrated in this article below 👇🏻

`for…of`, Protagonist #2

Now here’s our second protagonist, for…of. In case you don’t know, for…of is introduced in ES6. for…of has become a useful iteration method for a lot of JavaScript developers. for…of can iterate over any iterable objects. You name it, String, Array, Object…

String

const name = “Megan”;for (const alphabet of name) {
 console.log(alphabet);
}// Expected Output:
// M
// e
// g
// a
// n

Array (copied from the Example section)

const arrOf = [1, 2, 3, 4, 5]function printArrOf(arr) {
 for (let ele of arr) {
 console.log(ele);
 }
}// Expected Output:
// 1
// 2
// 3
// 4
// 5

Object (With the help of Object.entries())

const obj = {
 name: “Megan”, 
 age: “do the Math”, 
 role: “front-end developer” 
};for (const [key, value] of Object.entries(obj)) {
 console.log(key, value);
 console.log(`${key}: ${value}`);
}// Expected Output:
// name Megan
// name: Megan
// age do the Math
// age: do the Math
// role front-end developer
// role: front-end developer// Explanation: the [key, value] is a destructure of the result from Object.entries.

🐧 Sidebar Note 🐧
Object.entries() returns an array of a given object’s own enumerable string-keyed property.

const obj = {
 name: “Megan”, 
 age: “do the Math”, 
 role: “front-end developer” 
};Object.entries(obj)
// [
// [ ‘name’, ‘Megan’ ],
// [ ‘age’, ‘do the Math’ ],
// [ ‘role’, ‘front-end developer’ ]
// ]

When Should We Use Which One? 😯

The purpose of this section is put these two for statements “side by side”, so we can have a comparison.

Here’s a simple way to remember this:
⭐️ Use for…in when iterating the object’s enumerable string-keyed property pairs. You know the { blah1: blah blah, blah2: blah blah blah }. BUT NOT ARRAY!! Remember think of whatever it is logged will be like logging the index of an array, but the string, so if you want to log/return the value, make sure print it with obj[key].
⭐️ Use for…of when iterating over iterable objects: String, Array, etc.