DEV Community

Cover image for Circular access of Array in JavaScript
Emma Turner
Emma Turner

Posted on

Circular access of Array in JavaScript

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']

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`
Enter fullscreen mode Exit fullscreen mode


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:


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
Enter fullscreen mode Exit fullscreen mode
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   ...♾
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Thanks For Reading.

Discussion (4)

sunilchau profile image
Sunil Chaudhary

Nice 👍🏻 easy to understand and nicely crafted keep posting stuffs like this ✌🏻🙌🏻

turneremma21 profile image
Emma Turner Author

Thank you Sunil for your kind words.

sunilchau profile image
Sunil Chaudhary

Your welcome Emma just keep posting stuffs like this would like to learn more...

stephanlamoureux profile image
Stephan Lamoureux

This just helped me so much!