vs for...of Loops

Serhii Shramko

Serhii Shramko /

4 min read--- views

The For Loop

There are many ways to iterate in JavaScript, and probably one of the most common is for a loop.

The for statement is a type of loop that will use up to three optional expressions to implement the repeated execution of a code block. Let’s take a look at an example of what that means:

for (initialization; condition; final expression
  // code to be executed
// Initialize a for statement with 5 iterations
for (let i = 0; i < 5; i++) {
  // Print each iteration to the console
  console.log(`The number is ${i}`);
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

But in addition to this for loop, there are two other types of for iteration methods we can use: and for...of.

The Statement

The statement iterates over all enumerable properties of an object that is keyed by strings (ignoring one keyed by Symbols), including inherited enumerable properties.

The syntax looks like this:

for (const variable in enumerable) {
  // Do something

For example, to loop through and console.log all the values in this user Object:

const user = {
  name: 'Serhii',
  age: 29,
  email: '',
  country: 'Ukraine',
  city: 'Kyiv'

for (const key in user) {
  console.log(`user.${key} = ${user[key]}`)
Output = Serhii
user.age = 29 = = Ukraine = Kyiv

We iterate through each key of the user Object, and then through this key we get the value with Bracket notation . and Objects is probably the easiest way to go through the object and use the key to get the value from it. and Arrays

The keys in the array are indexes (numbers).

const creatures = [

for (const index in creatures) {
  // We need access to creatures value by index
starfish and Strings

const oceanCreature = 'Shark';

for (const index in oceanCreature) {

The for...of Statement

The statement is useful for iterating over object properties, but to iterate over iterable objects like arrays and strings, we can use the for...of statement. The for...of statement is a newer feature as of ECMAScript 6.

In this example of a for...of loop, we will create an array and print each item in the array to the console.

const sharks = ["tiger", "great white", "hammerhead"];

// Print out each type of shark
for (const shark of sharks) {
  // Unlike, we don't need an index now
  // we have immediate access to the element of the array
great white

for...of and Objects

The for...of loop doesn't work with Objects because they don't have a [Symbol.iterator] property. You can try but you will get an error:

"Uncaught TypeError: Object is not iterable"

Iterating over a DOM collection

Iterating over DOM collections like NodeList:

const paragraphElements = document.querySelectorAll('p');

for (const paragraph of paragraphElements) {
  // Make all paragraphs red = 'red';


In this post, we understood how for loops work and the difference between for...of and statements.

Loops are an integral part of any programming language, as they are constantly used in places where you need to perform the same type of tasks several times.

Share it: