[ES6] The Iterator Protocol

Posted 2020-10-15 Answer1215

The iterator protocol is used to define a standard way that an object produces a sequence of values. What that really means is you now have a process for defining how an object will iterate. This is done through implementing the .next()method.

 

How it Works

An object becomes an iterator when it implements the .next() method. The .next() method is a zero arguments function that returns an object with two properties:

1. value : the data representing the next value in the sequence of values within the object
2. done : a boolean representing if the iterator is done going through the sequence of values
   • If done is true, then the iterator has reached the end of its sequence of values.
   • If done is false, then the iterator is able to produce another value in its sequence of values.

Here’s the example from earlier, but instead we are using the array’s default iterator to step through the each value in the array.

 

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const arrayIterator = digits[Symbol.iterator]();

console.log(arrayIterator.next());
console.log(arrayIterator.next());
console.log(arrayIterator.next());

/*
Object {value: 0, done: false}
Object {value: 1, done: false}
Object {value: 2, done: false}
*/

 

/*
 * Programming Quiz: Make An Iterable Object
 *
 * Turn the `james` object into an iterable object.
 *
 * Each call to iterator.next should log out an object with the following info:
 *   - key: the key from the `james` object
 *   - value: the value of the key from the `james` object
 *   - done: true or false if there are more keys/values
 *
 * For clarification, look at the example console.logs at the bottom of the code.
 *
 * Hints:
 *   - Use `Object.keys()` to store the object‘s properties in an array.
 *   - Each call to `iterator.next()` should use this array to know which property to return.
 *   - You can access the original object using `this`.
 *   - To access the values of the original object, use `this` and the key from the `Object.keys()` array.
 */

const james = {
    name: ‘James‘,
    height: `5‘10"`,
    weight: 185
};

james[Symbol.iterator] = function() {
    var keys = Object.keys(james);
    var nextIndex = 0;
    return {
        next: function() {
            var key = keys[nextIndex];
            var obj = {
                key: key,
                value: james[key],
                done: nextIndex === keys.length-1 ?
                        true:
                        false
            };
            nextIndex++;
            return obj;
        }
    }
}


 const iterator = james[Symbol.iterator]();
//
 console.log(iterator.next().value); // ‘James‘
 console.log(iterator.next().value); // `5‘10`/ 
 console.log(iterator.next().value); // 185