Skip to content
Advertisements

JavaScript for…of

What is the For…of Loop?

The JavaScript for … of statement creates a renewed loop on renewable objects. The For … loop is introduced to be an alternative to both the inin and forEach () method in ES6 and supports the new iteration protocol. It allows you to loop on repeatable data structures, such as For..of, Arrays, Strings, Maps, Clusters, and more.

Syntax:

for (var of ite) {
// codes………..
}

  • var: It updates the variable every time the loop is refreshed.
  •  ite: An object which has enumerable properties and can be iterated upon.

Use in the Array

JavaScript arrays are similar to the list. There are a number of methods that allow processes such as transition operations in the array prototype to perform.

Example 1

        let list = [1, 2, 3, 4, 5, 6];

        for(let value of list) {
            value += 1;
            console.log(value)
        }

2
3
4
5
6
7


Example 2

        let txt = ["first","second","third"];

        for(let value of txt) {
            console.log(value)
        }

first
second
third


Use in the Map

The JavaScript map object holds key-value pairs. A map object is repeated between items, depending on how it is placed. In turn, the for … of loop returns a sequence of key / value pairs for each iteration.

Example

        let loginSystem = new Map([
            ["person1", 123],
            ["person2", 234],
            ["person3", 345],
        ])

        for(let system of loginSystem) {
            console.log(system);
        }

        for(let [a,b] of loginSystem) {
            console.log(a);
        }

        for(let [a,b] of loginSystem) {
            console.log(b);
        }

[“person1”, 123]
[“person2”, 234]
[“person3”, 345]
person1
person2
person3
123
234
345


Use in the String

Strings are used to store data in text form.

Example

        let txt = "truecodes";
        let list = [];

        for(let value of txt) {
            list += value + ",";
        }
        console.log(list)

t,r,u,e,c,o,d,e,s


Use in the Set

The JavaScript Set object allows you to store unique values ​​of any type that could be primitive values ​​or objects. The iteration in the elements of a Cluster is based on the order of insertion. A value in the set can only occur once. If you create a cluster that has the same item multiple times in a sequence, it is still considered to be a single element.

Example

        let numberList = new Set([1, 2, 3, 4, 5]);

        for(let value of numberList) {
            console.log(value);
        }

1
2
3
4
5



 The Arguments Object

You can refresh arguments to examine all parameters that pass to the JavaScript function.

Example

        (function () {
            for(let value of arguments) {
                console.log(value);
            }
        })("first", "second", "third");

first
second
third


Generators

Generators are functions which can be exited and later re-entered.

Example

function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (const g of generator()) { 
  console.log(g); 
}

1
2
3


Closing Iterators

JavaScript offers four known methods of terminating a loop execution namely: break, continue, return and throw.

Example

        function* myFunction(){ 
            yield 1; 
            yield 2; 
            yield 3;
        }; 

        for (let arr of myFunction()) { 
            console.log("break: " + arr); 
            break;
        }

        for (let arr of myFunction()) { 
            console.log("continue: " + arr); 
            continue;
        }

break: 1
continue: 1
continue: 2
continue: 3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: