Iterators in Javascript

Like Tweet Pin it Share Share Email
Iterators in Javascript

Hey, web fellows, In today’s AppDividend Tutorial, I have briefly described Iterators in Javascript.

Iterators in  Javascript

An iterator is a new concept of ES6. An Iterator is an object that let us iterate through an Array, an Object, String or even custom Objects.

The Iterator allows us to effectively loop over a collection of objects like an array, string, objects or other data structures.

Example

//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next());

Possible Errors

  1. If you perform code directly in your browser, then chances are very high to fail the webpack compilation process.

Possible Solutions

  1.  Beginner’s Guide To Setup ES6 Development Environment  Follow this article strictly and put above code in the main.js file.

Output

//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next().value);

Output

Robot
//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next().done);

Output

false
//main.js

let dances = ['Robot', 'Hip-hop','break'];
let mj = dances[Symbol.iterator]();
console.log(mj.next());
console.log(mj.next());
console.log(mj.next());
console.log(mj.next());

Output

Object {value: "Robot", done: false}
Object {value: "Hip-hop", done: false}
Object {value: "break", done: false}
Object {value: undefined, done: true}

If you notice carefully, then the last object has value undefined and done is true. It means that our array has only three items and up to 3 items done is false because the compiler does not know that whether the next value is there or not so it gives the done = false. After that when next value is not there then it will give the value = undefined and done = true.

 

How can we define the iterators?

An object or an array to be iterable, it needs to implement the iterable protocol, meaning that the object must have a property with a Symbol.iterator key. In the previous example, we have used this protocol.

//main.js

function itemIterable(item) {
    return typeof item[Symbol.iterator] == "function";
}

In above example, when we pass the mj array to this itemIterable() function, we will get the following result.

Robot
Hip-hop
break
Iterators in Javascript
Iterators in Javascript

 

If we want to create an iterator then first take an object and then add Symbol.iterator protocol in it so it returns an interface in which we can call the next() method and then finally we get an object, which has 2 properties value and done.

Memorable Points

  1. Iterators are functions that provide an interface through which can call the method like next() and in return gives us an object.
  2. Iterators are created using the iterable protocol that allows the iterable object to customize their behavior. For example, arrays are not iterators in ES6
  3. An Iterator lets us iterate the content of an object at a given point of time.
  4. An Iterator creates Traversable Data Structures.
If you still have doubt then ask in the comment below, I am happy to help you out.

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *