Now that we’ve had a chance to get the hang of for loops and while loops, let’s look at some upgrades we can bring to loops to make our life a bit easier.

For … in Loops

One of the most common operations you will find yourself doing in programming is processing every item in an array. This is often known as ‘iterating over an array’. Because this action is so common, the JavaScript language contains a short-hand method for doing this without having your own index/counter that you have to manage yourself.

for (variable in object) {
    statements
}

An example of how you might use this is as follows;

var fruits = ["Apple", "Kiwi", "Pineapple"];

for (i in fruits) {
    console.log("Fruit " + i + " is " + fruits[i]);
}

You can see that this is a little simpler than having to check for the length of the array in your own for loop against a custom variable.

For … of Loops

Where a ‘for in’ loop will step over every index (position) of an array, a ‘for of’ loop simply steps over every value in the array. This can be even more convenient if you just need to step over the values in an array. The only downside of using this method is that you don’t actually know the position of the item you’re working with in the array. This is often not a problem, but if you decide that you want to remove an item from an array while looping over it for instance, then this won’t work.

The difference between ‘for in’ and ‘for of’ is shown in the code below.

var fruits = ["Kiwi", "Apple", "Peach"];

for(index in fruits) {
    console.log(index);             // 0, 1, 2
    console.log(fruits[index]);     // Kiwi, etc.
}

for(item of fruits) {
    console.log(item);              // Kiwi, etc.
}

For in / of and Objects

One of the nice things about ‘for in’ and ‘for of’ is that they work with objects too. As objects don’t have a ‘length’ property and you cannot always predict what values are stored inside of them, for in and for of are very useful when trying to find out more about an object.

An example of using ‘for in’ and ‘for of’ on an object is shown below.

var contact = {
    name: "John",
    mobile: "01234567890",
    printSummary: function() { 
        console.log(this.name + ": " + this.mobile);
    }
}

// Example: for in

for( var key in contact ) {
    console.log(key + " = " + contact[key]);    
}

// Prints...
// name = John
// mobile = 01234567890
// printSummary = function 


// Example: for of

for( var item of contact ) {
    console.log(item);
}

// Prints...
// John
// 01234567890
// function

Advanced Topic: Break and Continue

There are some additional keywords you can use inside of a loop to control the way the program behaves. These allow you to add more fine tuned control to the way your loops function, and are particularly helpful if you need to exit a loop early under certain conditions.

break:If you use the ‘break’ command anywhere inside of a loop then the loop will immediately finish. It doesn’t matter what line it is on, whether the loop condition is true or false. It will simply stop.

continue: If you use the ‘continue’ keyword inside of a loop, the current iteration of the loop will immediately finish. Unlike break however, the ‘step’ condition will run (in a for loop) and the loop condition will be checked.

An example of using the break keyword is shown below. In this simple example, we just use break to replace the condition variable. Notice how the following two while loops are essentially the same…

// Example 1
var counter = 0;

while( counter < 5 ) {
    console.log(counter);
    counter += 1;
}

// Example 2
var counter = 0;

while( true ) {
    if ( counter >= 5 ) {
        break;
    }

    console.log(counter);
    counter += 1;
}

Okay, in this example the second loop is just bigger and more complicated. But there are many times when you want to exit a loop early. For instance, if you’re searching through an array for a given value, once you have found that value - you could call “break” because there’s no point in searching over the rest of the values.