What is for...of Loop in JavaScript?

ES6 introduced the form of a loop in javascript to iterate over the iterable objects in javascript.

The iterable objects can be :

• array,set,string etc
• Objects such as NodeList and arguments.
• User defined objects

Syntax

The syntax of for of loop used in javascript is

variable - elements of the iterable object are assigned to a variable.

iterable - can be arrays,maps,strings etc.

Examples

Iterating Over Arrays

for of loop can be used to iterate over the elements of the array and do manipulation of the elements.

Output

The index of the elements of the array can also be accessed by using the entries() method of the array with for of loop in javascript.

Output

Iterating Over Strings

for of loop can be used to iterate over each alphabet of the string in javascript

Output

Iterating Over a TypedArray

A Typed Array is a slab of memory with a typed view into it, much like how arrays work in C. Because a Typed Array is backed by raw memory, the JavaScript engine can pass the memory directly to native libraries without having to painstakingly convert the data to a native representation.

Output

Iterating Over a Map

for of can be used to iterate over map objects.

Output

Iterating Over a Set

for of can be used to iterate over the unique elements of the set.

Output

Iterating Over the Argument Object

arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.

Output

Iterating over a DOM Collection

for of loop can be used to iterate over DOM collections like NodeList.

The following programs add a class "Test" to every paragraph directly descendant of an article.

Closing Iterators

break, throw or return statements can be used to break the for of the loop abruptly.

Output

Iterating Over Generators

generators are functions generating an iterable object. for of loop can be used to iterate over generators.

Output

Iterating Over Other Iterable Objects

for loop can also be used for iterating over other iterable objects.

Difference Between for...of and for...in

Bothfor...of and for...in are used to iterate over the iterable objects. The difference between for...of and for...in loop is

Let's see the difference with an example

Output

Browser Compatibility

Every browser except Internet explorer supports the arrow function.

Some browsers which support arrow functions are