Iterating Through Javascript Arrays

Iterating (In the simplest terms) means to go through each item in a group of items.
An array is a group of items, so to iterate through an array means to do something with the items in an array (But not necessarily all of them)

Everything you learn here is likely to be applicable to any other programming language you learn, arrays in one language behave pretty much the same in every other language.

To iterate through an array you'll want to use either a for loop or a while loop.
A for loop is normally used when you know in advance how many times a loop should run.
A while loop is used to run a block of code while a condition is true.

Firstly I'll talk about my preferred method of iterating through an array, using a for in loop.
Here's an example:

var myNewArray = new Array(1,2,3,4,5)

for (i in myArray){
alert(myArray[i]);
}

This is a very simple example that creates an alert box containing each item in the array that I've named "myArray" (Which just contains the numbers 1-5).
That's great for doing the same thing for every item in an array, but what if you want to do something only when a condition is true?

        var myNewArray = new Array(1, 2, 3, 4, 5)
        var i = 0
        for (i in myNewArray) {
            if (i = 3) {
                alert(i);
                break
            }
            else {
                i++;
            }
        }
    

The above example is the same for in loop, but has an if statement which tests to see if i=3 (Then creates an alert box), if not, it increases i by 1 (i++).

Notice that I've used the "break" statement in the first part of the if statement, this insures that once I've found the value I want, it get's out of the if statement, you should get into the habit of doing this as it will speed up your programs and help to prevent undesired effects.

 

Now let me show you a standard for loop:

        var myNewArray = new Array(1, 2, 3, 4, 5)
        var i = 0;
        for (i = 0; i <= 2; i++) {
            alert(myNewArray[i]);
        }
    

I'm still using the same array of numbers 1 to 5.
This javascript snippet functions similarly to the "for in" loop I showed you previously, the difference with this one is that it will go through the array, starting from the first item (Index [0]) and up to the 3rd item (Index [2]) increasing the counter (i) by 1 each time the loop is run.

The counter here (i) is important. I've used i++ for each run of the loop, but I could have used i=i+2, this would skip every other item in the array until it reaches the upper limit you set in the for statement (i<=2), sometimes this can be handy, so if you know that you don't want to use the entire array or you want to skip every x items, then a standard for loop might be more appropriate for you.

Occasionally you may want to do something while a condition is true, for this you'll want to use a while loop.
Here's an example of a while loop that functions exactly the same as the for loop that I just showed you:

        var myNewArray = new Array(1, 2, 3, 4, 5)
        var i = 0;
        while (i <= 2) {
            alert(myNewArray[i]);
            i++;
        }
    

So while i is less than or equal to 2 we get an alert of i then i is increased by 1.

Incase you didn't already know, you can treat a string exactly as if it were an array, as technically a string is just a group of individual characters. Try replacing "new Array(1, 2, 3, 4, 5)" with "My Name Is John" and see what happens.

This should provide you with a good starting point to access all (Or some of if you so choose) of the items in an array.

If you enjoyed this article, please consider giving it a +1

Tags: javascript array, javascript

Published: 5/12/2014 7:59:05 PM
By: Stephen Warren