ES6 — Reverse Iterable for an Array

To iterate over an array, a for..of loop can be used like below:

let arr = [1,2,3,4,5];
for (let i of arr) {
    console.log(i); //outputs 1,2,3,4,5 
}

But what if we want to iterate over the array backwards?
The usual way would be to use a regular for or while loop, like :

let arr = [1,2,3,4,5]; 
for (let i = arr.length - 1; i >=0 ; i--) {
    console.log(arr[i]); //outputs 5,4,3,2,1 
}

But this way we lose the convenience of using a for..of loop. In order to use a for..of loop to iterate over an array backwards we would have to reverse the array itself, like :

let arr = [1,2,3,4,5];
for (let i of arr.reverse()) { //not cool!
    console.log(i); //outputs 5,4,3,2,1 
}

But as is obvious, the problem with this approach is that the array arr has to be reversed which is not always desired.

This is where the ES6 Iteration Protocols come into play. We will define our own custom iterator that will iterate over the array arrbackwards. And we will make it an iterable as well.
Here we go :

let arr = [1,2,3,4,5];
let index = arr.length;
//Custom Iterator
let reversedIterator = {
     next : function () {
         index--;
         return {
             done : index < 0,
             value : arr[index]
         }
     }
}
//Make it an Iterable
reversedIterator[Symbol.iterator] = function() {
   return this; 
}
for (let i of reversedIterator) {
     console.log(i); //outputs 5,4,3,2,1 
}

If you’re not familiar with the [Symbol.iterator], make sure to checkout the MDN documentation for ES6 Iteration Protocols.

From here it is easy to see that this concept can be extended to any kind of iteration logic, over any kind of collection.

Cheers.