Adding next and previous feature to your JavaScript

This is one topic every JavaScript programmer searches for at a certain point in the programming journey. You want to be able to click a button to view or access the previous item, after you might have zoomed past it and also be able to return to item were on before deciding to go back. To achieve this, the items need to be stored in array, so at the click of a button it increments or decrements. A function that directly holds an object is needed e.g const getNextAndPrev = array=> ({ }) Here the function is returning an object directly, this is possible by wrapping the curly braces in parenthesis, so JavaScript does not confuse it for a wrapper for multiple expressions in a function.

I used this method in one of my projects and it did everything I wanted, that's why I am writing about it so people could solve their problems with it. There are numerous ways to achieve this but this method is pretty straight forward.

Create a function with the example below

const getNextAndPrev = array => ({
    currentPoint: 0,
    array,
    next(){

        if( this.currentPoint >= ( this.array.length - 1 ) ){
             this.currentPoint = this.array.length - 1;
        }else{
            this.currentPoint++;
        }

        return this.array[this.currentPoint];
    },
    prev(){ }
});

The above code simply states the current position of the array, the array and a next function, which says if the currentPoint is greater or equal to the array length minus 1, we are using array length minus 1 because the array starts at zero (0), while the length measurement starts at one (1), if the normal array count is 0-9, it would be 1 - 10 with the length measurement, that's why we substract one so it is equal to the actual array count. Now, if it is true then we set the currentPoint equal to the array length, which means it has gotten to the end of the array, and if it is false we increment the currentPoint, it moves to the next item in the array. To be able to execute this code you'd need to give the array parameter an argument, and assign it to a variable like this; let accessNextAndprevious = getNextAndPrev([4, 6, 7, 9, 1])

This way you are able to use the next method in the 'getNextAndPrev' object, you can simply access it like this; accessNextAndprevious.next() that is why we returned the object directly.

For the previous method add the code below to the prev() function:

 if( this.currentPoint <= 0 ){
            this.currentPoint = 0;
        }else{
            this.currentPoint--;
        }

        return this.array[this.currentPoint];

This says if 'currentPoint' is less than or equal to zero (0), then 'currentPoint' equals zero else decrement, 'currentPoint' keeps decrementing till it equals zero. To execute we simply say accessNextAndprevious.prev()

In summary, the value of 'currentPoint' changes immediately you execute the next or previous method, so you just have to set it ones.

Thank you for reading, watch this space for more educative topics.