• Choose a category
• All
• Classic-Fiction

Now, most of the loops you'll see (and probably write, too) will be structured very similarly to this one, even though all three statements in the parenthesis are optional. However, make sure you really understand why this thing works; if you understand what each of these pieces do, your for loops will be more flexible. For example, who says we need to set the variables inside the parentheses?

var i = 0;

for ( ; i < names.length; i++) {

// whatever

}

Notice that even though I've taken the variable declaration outside the loop, we still need to put a semicolon after where the statement would go.

On the other hand, why not set two variables in the first part, and "cache" the value of names.length in the variable len, and use that in the second statement (this really is faster if you're working with a large array).

for (var i = 0, len = names.length; i < len; i++) {

// whatever

}

Notice that I haven't separated the two variable declarations with a semicolon; it has to be one statement, so we separate it with comma.

But then there's the post-loop-actiony part. Why not throw that inside the loop?

for (var i = 0; i < names.length; ){

// whatever

i++;

}

And instead of doing the whole < names.length thing, we could just check to see if the value exists in the array.

var i = 0;

for ( ; names[i] ; ) {

//do something

i++;

}

This is an important point that's relevant to more than just the for loop: if you understand what each piece does, you'll be able wield it more effectively. With this in mind, can you guess why you haven't tried removing the Boolean expression from the for loop? Without that, your loop would loop forever (try it, and crash your browser).

While Loop

Here's a structure that might look a bit like the last for loop we wrote:

Example 2.25

var names = ["Ringo", "John", "Paul", "George"],

i = 0;

while (i < names.length) {

alert("Say hi to " + names[i]);

i++;

}

A while loop is a simpler form of the for loop. Instead of three statements in the parentheses, there's only one: the Boolean expression. If it's true, the while loop will run again. Of course, it starts with the while keyword, followed by the parentheses, and then the block statement. If you're using any variables, you have to initialize them before the loop and increment them within the loop. Depending on your task, a while loop can be more elegant than a for loop. What I've shown above is using a while loop for iteration; that's usually better off left to a for loop. A while loop, semantically, should be used while something is true:

Example 2.26

var not_home = true,

miles_driven = 0;

while (not_home) {

miles_driven += 1 // drive another mile

if (miles_driven === 10) {

not_home = false;

}

}

alert(miles_driven);

For Loop, Revisited

There's another form of for loop that you should now about, usually called a for-in loop. It's used for looping over objects. Check it out:

Example 2.27

var person = {

name : "Jules Verne",

job : "Author",

year_of_birth: 1828,

year_of_death: 1905

},

prop;

for (prop in person) {

alert("His " + prop + " is " + person[prop]);

}

As you can see, a for-in loop is much simpler than the regular for loop. Instead of the three statements, we only put one in the parentheses: the name of the iterator variable, the keyword in, and the object we're going over. As expected, this will execute the inside of the block for each item or property in the array or object, respectively. There's a caveat that you must be aware of when using the for-in loop with objects, but we'll discuss this more in the next chapter.

Summary

You should be warming into our topic by now. We've covered the different types available in JavaScript, most of the operators, and how to use conditions and loops. In the next chapter, we're going talk about one of the most important features of JavaScript: functions.

More Basics

Now that we've got the very basics of types and syntax down, let's move on to another incredibly