Skip to content

A Memory Trick To Remember When to Use for...of vs for...in

2 min read

A way to loop through a collection in JavaScript is to use the for...in and for...of statements. Depending on whether the collection is an object or an array, you would use either one of these statements.

After 6 years of web development, I still couldn't remember which is which — was for...of for objects and for...in for arrays? 🤔

Then the following happened when I used the wrong loop statement:

const skills = { javascript: "good", nodejs: "excellent", php: "poor" };
for (const language of skills) {
	console.log(language);
}

// Uncaught TypeError: skills is not iterable

Every. Single. Time. 😓

To save myself the irritation of reaching out to Google whenever I had to loop through a collection (which is often!), I came up with a mnemonic — a memory trick that helps me remember which loop statement I should use with objects and which one with arrays.

What do for...in and for...of have to do with aliens?

The mnemonic I use that helps me decide which loop statement I need to use for objects vs arrays is to think about aliens.

Aliens?! I hear you say.

Yes, aliens.

Because what do aliens fly in? UFOs! 🛸

UFO stands for Unidentified Flying Object. Therefore, I know that for...in is used to iterate through the keys of an object.

Aliens -> Unidentified Flying Object -> for...in object

That's it! 💡

const skills = { javascript: "good", nodejs: "excellent", php: "poor" };
for (const language in skills) {
	console.log(language);
}

// Output:
// "javascript"
// "nodejs"
// "php"

Now it works! Yay. 🎉

If for...in is used for objects, then for...of is used to iterate through the elements of an array.

const fruits = ["mango", "pineapple", "kiwi"];
for (const fruit of fruits) {
	console.log(fruit);
}

// Output:
// "mango"
// "pineapple"
// "kiwi"

This little memory trick has saved me countless Google searches. I hope you'll remember it next time you have to use for...in or for...of.

Whenever you're iterating through a collection in JavaScript, just think about aliens. 👽 🛸

Write clean code. Stay ahead of the curve.

Every other Tuesday, I share tips on how to build robust Node.js applications. Join a community of 1,060 developers committed to advancing their careers and gain the knowledge & skills you need to succeed.

No spam! 🙅🏻‍♀️ Unsubscribe at any time.

You might also like

Logging with Pino and AsyncLocalStorage in Node.js

From a lousy dump of debug statements to a powerful debugging tool. Learn how to apply contextual logging in Node.js.
Read article

A Beginner's Guide to Building a Docker Image of Your Node.js Application

In this article you'll learn how to create a Docker image to deploy your Node.js application.
Read article

Using Callbacks With Async/Await

How do you make a callback-based asynchronous function work nicely with async/await? You promisify it.
Read article