The Difference Between "" and "for...of" in JavaScript

Tyler Tyler (291)

There are two very similar statements in JavaScript: and for...of. And while they can be easily confused, they're actually quite different. In this guide, we'll cover the usage of both statements with multiple examples of each.

In short, iterates over the enumerable properties of an object, while for...of iterates over "iterable collections". There's more nuance, but you can generally think of as iterating over object properties and for...of as iterating over iterable values. Continue reading for further explanation and examples of each.

Posted in these interests:
h/javascript27 guides
h/code68 guides
h/webdev59 guides

The statement iterates over all "non-Symbol, enumerable properties of an object". So what does this mean? Basically, lets you iterate over an object's properties, including properties in the prototype chain.

Why exclude symbols?

Symbols are a primitive data type that are always unique. They are typically used as "private" properties to avoid name clashes when inheritance is intended. And because they're intended for use as "private" properties, will not return them.

What are enumerable properties?

Simply put, enumerable properties are properties that have their enumerable flag set to true, which is the default for most properties. These are properties set either by simple assignment or via a property initializer.

Keep in mind, that also iterates over properties in the prototype chain. See the following example:

const someObj = { someProp: 123 };

let otherObj = Object.create(someObj);
otherObj.otherProp = 456;

for (let key in otherObj) {

// output


The for...of statement iterates over "iterable objects". Think Array or String, although there are many iterable object types. Object, however, is not iterable by default.

As I mentioned in the intro, think of for...of as iterating over the values of an iterable object.

What is an iterable object?

In order for an object to be iterable, it (or an object in the prototype chain) must implement a @@iterator property, which returns an iterator. An iterator object is an object that includes a next method, which returns the next item in a sequence. There are many built-in iterable objects, like Array and String, for example.

The following example shows the usage of for...of:

const primes = [2, 3, 5, 7];

for (let prime of primes) {

// output

Make your object readable in console.
Zach Zach (236)
2 minutes

This short guide will show you how to pretty print a JSON object in the Chrome Developer Tools console.