ES6: JavaScript for...of statement

Introduction

This tutorial will learn about for-of introduced in ES6 version of JavaScript.

The for...of statement is used for iterating over arrays, maps or sets.

Looping over an array

Example in code:

const fruits = ['Orange', 'Apple', 'banana', 'Lemon'] // looping through for (fruit of fruits) { // do something with fruit } 

Looping over a string

for...of can also be used to loop over contents of a string.

const words = 'Happy new year!' for (char of words) { console.log(char) // H a p p y n e w y e a r ! } 

Looping over a Set

A set is a collection of unique values.

const letters = new Set(['a', 'b', 'c']) for (letter of letters) { console.log(letters) // a, b, c } 

Looping over a map

A map is key-value pair, where key can be of any type. In JavaScript it's common to use object literals as maps

const details = new Map( [ ['name', 'Michael Myers'], ['age', 45] // made up ]) // or a cleaner way: const details = new Map() details.set('name', 'Michael Myers') for (detail of details ) { console.log(detail) } 

Summary

for...of introduces a cleaner way of looping over arrays, sets, strings and maps.

Read more about 👉 Map objects