Circular access of Array in JavaScript

#javascript #webdev #beginners #100daysofcode

The formula you see is part of modular arithmetic. I plan digging into this stuff to see what practical things for our coding I can find! Tell me in the comments if you want more of these techniques!

What is this basically?

An abstract technique which is super simply but I've found it so many applications! Let's get to know 'em in detail.

For example:

Let's say that we've the following array: ['a','b','c']. If we try to access it at position 0 it returns 'a'. Position 1 returns 'b'.
Position 2 returns 'c'. Position 3 returns undefined, since we don't have an element at position 3.
In this normal case, every index greater than 2 returns undefined because it was not found in the array.
But what if, instead of returning undefined at position 3, it started from the beginning again and returned 'a'? And then, for position 4-'b'? Position 5-'c'? Position 6-'a' and so, until infinity... ♾

That is not matter of the index you try to access, it always gives an existing next element.

Now let's see the codes

const arr = ['a', 'b', 'c']

//REALITY
arr[0] //=> 'a'
arr[1] //=> 'b'
arr[2] //=> 'c'
arr[3] //=> undefined
arr[4] //=> undefined
arr[5] //=> undefined
arr[6] //=> undefined
arr[7] //=> undefined

// GOAL: 
arr[0] //=> 'a'
arr[1] //=> 'b'
arr[2] //=> 'c'
arr[3] //=> `a`
arr[4] //=> `b`
arr[5] //=> `c`
arr[6] //=> `a`
arr[7] //=> `b`

Implementation

Once you've understood what it does, the implementation is just a formula which you don't even have to understand :) Just use it. Here it is:

// EXAMPLE

arr[(1 % n + n)%n]
arr // the array which you access
i // the index of arr you're trying to access
n // the length of arr

const arr = ['a', 'b', 'c']
const i = 5 //index you wanna access
const n = arr.length

arr[(i % n + n) % n] // => 'c'

//At the end it works as if: 
//['a', 'b', 'c', 'a', 'b', 'c', 'a', ...♾]
//  0    1    2    3    4    5    6   ...♾

Example Use

Let's say that we have a function which has to return the next element from an array with unspecified length. Simple.

We could hardcode it with a ternary or switch or if/else but we don't have to. Here's my solution using the circular array access:

const choosePos = (currentPos, chooseFromArr) => {
    const i = chooseFromArr.indexOf(currentPos)+1
    const n = chooseFromArr.length
    return chooseFromArr[(i % n + n) % n]
}

const arr = ['post1', 'pos2', 'pos3', 'pos4']
choosePos('post1', arr) // => pos2
choosePos('post2', arr) // => pos3
choosePos('post3', arr) // => pos4
choosePos('post4', arr) // => pos1