vs. for...of in JavaScript and for...of are statements used for iteration. I still get them mixed up (😬), so this is a quick reference post for future me. iterates over the enumerable string property names of an object. It includes inherited enumerable properties and excludes property symbols.

const me = Object.create({ firstName: 'Zach', lastName: 'Snoek' });
me.favoriteColor = 'blue';

for (const key in me) {
    console.log(`${key}: ${me[key]}`);

"favoriteColor: blue"
"firstName: Zach"
"lastName: Snoek"
*/ and arrays

Arrays are just objects whose property names represent indices. However, an array can have non-index properties, which can lead to some confusing behavior with

const colors = ['red', 'green', 'blue'];
colors.hello = 'hello';

for (const key in colors) {


Additionally, the index properties are returned as strings, which isn't usually helpful when working with arrays. For these reasons, it's best to use for...of to iterate over arrays.


for...of iterates over the values returned from an iterable, such as an array, set, or string.

const colors = ['red', 'green', 'blue'];
colors.hello = 'hello';

for (const color of colors) {

const string = 'zach';

for (const char of string) {


Let's connect

Come connect with me on LinkedIn, Twitter, and GitHub!

If you found this post helpful, please consider supporting my work financially:

☕️Buy me a coffee!

Subscribe for the latest news

Sign up for my mailing list to get the latest blog posts and content from me. Unsubscribe anytime.