JavaScript: Cycle Through An Array

A simple and short “tutorial” on how to cycle through an array in JavaScript without using an if statement.

A simple and short “tutorial” on how to cycle through an array in JavaScript without using an if statement.

Disclaimer: As of this post I am currently less than 2 months in to a coding boot camp at Bloc. I’m sure that some of this information is rather elementary and in some cases not even the “best” method, but so far it’s the best I know. I’m open to any corrections or criticisms (preferably of the friendly type). Thanks!
– J

I haven’t seen this method of cycling through an array used very often, so I thought I would write-up a short blog post about it. I’m sure that anyone who is beyond a novice coder already knows this stuff, but it’s good practice for me to write about what I am learning. Arrays are incredibly useful for storing and manipulating values. Using indexes to access those values is incredibly easy and intuitive… until you need cycle past the end of the array and back to the beginning. Then all hell breaks loose (OK, actually you’ll just get an error message, but whatever, I’m trying to keep this as unboring as possible).

For those of you who aren’t familiar with arrays or indexes; first, congratulations on reading further than I would have. Second, here’s a quick explanation: Basically an array is a list of values (programmer speak for “things”) that are stored and accessed by various other coding methods. An array in JavaScript looks like this: var anArray = ["this", "that", "and", "another", "thing"];
In human language, that basically says, “I’m creating a variable named ‘anArray’ and everything inside the brackets is an item in the variable.” So if I ask the computer to tell me what item I have stored in anArray at index (index basically means position in line) 1, it will respond with "that". Keep in mind that computers start counting with the number zero, so "this" is stored at index 0. If you’re wondering, the ; at the end is because in JavaScript that’s what the cool kids do.

Now back to the boring stuff! Cycling through the last value of an array and starting back at the first value, from what I’ve seen, ends up looking like this:

var anArray = ["this", "that", "and", "another", "thing"];
var indexPosition = 0;

/* insert the code that cycles through the array and returns a value at an index, whatever, etc... */
indexPostion++;
if (indexPosition !< anArray.length) {
indexPosition = 0;
};

The key takeaway here is the addition of the indexPosition variable and the if statement. It works, but it’s adding unnecessary code. How I’ve cycled through a list is by using the .push() and .shift() methods(.pop() and .unshift() will also work, but reverse the direction). Here’s a codepen showing it in action.

See the Pen cycle-array-push-shift by Jared (@JaredsPens) on CodePen.dark

If you look through the JavaScript you’ll see the following line cycleList.push(cycleList.shift());. And that’s it. That does everything that the code posted above does. I don’t want to take up a bunch of time repeating information you can easily find at MDN or at w3schools, but here’s a quick explanation of what’s happening. This code is removing and storing the value at index 0 and shifting all the other values to the left. Then JavaScript is pushing the stored value (taken from the shift method) to the end of the array. I think that’s pretty damn cool!

While playing around with this code, I also came up with a way to do the same thing using the splice method. Here’s what that looks like.

See the Pen cycle-array-using-splice by Jared (@JaredsPens) on CodePen.dark

One last note, as pointed out by a reader,  both methods I’ve mentioned above will permanently change the array, which may cause problems in some cases. In that case the for loop method will be the preferred method as it does not mutate the array.