Understanding for-of vs. for-in Loops in JavaScript

Photo by Sergey Zolkin on Unsplash

Understanding for-of vs. for-in Loops in JavaScript

Koustav Ganguly's photo
Koustav Ganguly
·

5 min read

Table of contents

Introduction

While diving deeper into JavaScript, I’ve been reflecting on the difference between the for-of and for-in loops. At first glance, they seem like they might serve similar purposes, but I’ve come to realize they actually have distinct use cases that make them more effective in different situations. I’m sharing my thoughts on this after spending some time exploring how both loops work with objects and arrays.

Objects vs Arrays: Key-Value vs Index-Value

In an object, we can clearly see the "key: value" pairs. It’s a straightforward structure where each key directly maps to a value. But in an array, it’s not immediately visible like that. What we often forget is that the index of each element in an array works as the "key," while the elements themselves serve as the "value."

This is an important distinction because it directly influences how we work with objects and arrays. For example, with the for-in loop, we can access both the keys of an object and the indexes of an array, which allows us to access the corresponding values.

The for-in Loop

The for-in loop is designed to iterate over the keys in an object and the indexes in an array. It’s incredibly useful when you need to loop through the structure where the key/index is important.

Here’s an example of how we use for-in with an object:

const user = {
    name: 'John',
    age: 25,
    occupation: 'Developer'
};

for (let key in user) {
    console.log(key, user[key]);
}
// Output:
// name John
// age 25
// occupation Developer

With the for-in loop, we get to the keys (name, age, occupation) and then use them to access the associated values.

For an array, the loop works similarly, but we access the indexes instead:

const fruits = ['apple', 'banana', 'cherry'];

for (let index in fruits) {
    console.log(index, fruits[index]);
}
// Output:
// 0 apple
// 1 banana
// 2 cherry

So here, the loop iterates over the indexes (0, 1, 2), and we can use them to retrieve the values (apple, banana, cherry).

The for-of Loop

Now, here’s where things get interesting. The key difference between the for-of and for-in loops lies in what they give you access to.

The for-of loop allows you to access only the values of an iterable object (like an array or string). It doesn’t give you the key/index—just the values. This is why you can’t use for-of on objects because objects don’t work with indices; they rely on keys.

Here's an example of how the for-of loop works with an array:

const fruits = ['apple', 'banana', 'cherry'];

for (let fruit of fruits) {
    console.log(fruit);
}
// Output:
// apple
// banana
// cherry

In this case, the for-of loop directly gives us the values of the array (apple, banana, cherry), which is exactly what we need in many scenarios when we don’t care about the index.

And with a string:

const word = 'JavaScript';

for (let char of word) {
    console.log(char);
}
// Output:
// J
// a
// v
// a
// S
// c
// r
// i
// p
// t

This loop iterates over the characters of the string, giving us each value (each character).

Why Can't You Use for-of on Objects?

The limitation of the for-of loop is clear: it’s not designed to work with objects. Objects use keys to access values, whereas for-of only works with the values themselves.

Here’s what happens if you try to use for-of with an object:

const user = {
    name: 'John',
    age: 25
};

for (let value of user) {  // ❌ ERROR
    console.log(value);
}

This results in an error because for-of doesn’t know how to iterate over the keys in an object.

For objects, you need to use the for-in loop, as it is specifically designed to iterate over the keys.

When to Use for-in and for-of

  • Use for-in when you need to iterate over the keys of an object or the indexes of an array. This loop is perfect for objects where you need to dynamically access properties.

  • Use for-of when you need to work with the values of an iterable object like an array or string, without worrying about the index or key.

Conclusion

After reflecting on the differences between for-of and for-in, the distinctions are pretty clear to me. Each loop has its own specific use case, and understanding when and where to use them can make your JavaScript code more efficient and easier to manage.

If you want to access keys or indexes, go with for-in. But if you're just looking to grab the values, for-of is your go-to.

Call to Action:

Have you used these loops in your projects? What are your thoughts on the difference between for-in and for-of? Feel free to share your experiences and let’s discuss how you’ve used them in your JavaScript work!

Contact Me

I would love to hear your thoughts, feedback, or any questions you might have regarding JavaScript loops or anything else related to coding. Feel free to reach out to me through any of the following:

I try my best to respond to every message and would love to connect with fellow developers, learners, and tech enthusiasts!

JavaScriptcodingcodecuriousityengineeringWeb Development