A JavaScript iterator is an object that exposes the next() method. This method returns the next item from the collection in the form of an object that has two properties-done and value. In the following example, we will return an iterator from an array by exposing the next() method:

    //Take an array and return an iterator 
    function iter(array){ 
      var nextId= 0; 
      return { 
        next: function() { 
          if(nextId < array.length) { 
            return {value: array[nextId++], done: false}; 
          } else { 
            return {done: true}; 
          } 
        } 
      } 
    } 
    var it = iter(['Hello', 'Iterators']); 
    console.log(it.next().value); // 'Hello' 
    console.log(it.next().value); // 'Iterators' 
    console.log(it.next().done);  // true 

In the preceding example, we are returning value and done till we have elements in the array. When we exhaust elements in the array to return, we will return done as true, indicating that the iteration has no more values. Elements from an iterator are accessed using the next() method repeatedly.

An iterable is an object that defines its iteration behavior or internal iteration. Such objects can be used in the for...of loops introduced in ES6. Built-in types such as arrays and strings define default iteration behavior. For an object to be iterable, it must implement the @@iterator method, meaning the object must have a property with 'Symbol.iterator' as key.

An object becomes iterable if it implements a method whose key is 'Symbol.iterator'. This method must return an iterator via the next() method. Let's take a look at the following example to clarify this:

    //An iterable object 
    //1. Has a method with key has 'Symbol.iterator' 
    //2. This method returns an iterator via method 'next' 
    let iter = { 
      0: 'Hello', 
      1: 'World of ', 
      2: 'Iterators', 
      length: 3, 
      [Symbol.iterator]() { 
        let index = 0; 
        return { 
          next: () => { 
            let value = this[index]; 
            let done = index >= this.length; 
            index++; 
            return { value, done }; 
          } 
        }; 
      } 
    }; 
    for (let i of iter) { 
      console.log(i);  
    } 
    "Hello" 
    "World of " 
    "Iterators" 

Let's break this example down into smaller pieces. We are creating an iterable object. We will create an iter object using object literal syntax that we are already familiar with. One special aspect of this object is a [Symbol.iterator] method. This method definition uses a combination of computed properties and ES6 shorthand method definition syntax, which we already discussed in the last chapter. As this object contains a [Symbol.iterator] method, this object is iterable, or it follows an iterable protocol. This method also returns the iterator object that defines the iteration behavior via exposing the next() method. Now this object can be used with the for...of loop.