Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Advanced Javascript development – Part 5

Friday, December 6th, 2013 by Servage

There are cases in which we’ll want to go through every item in an array and do something with it, but we won’t want to write out the entire list of items and repeat ourselves a dozen or more times. You are about to learn a technique of devastating power, readers: loops.

I know. Maybe I made loops sound a little more exciting than they seem, but they are incredibly useful. With what we’ve covered already, we’re getting good at dealing with single variables, but that can get us only so far. Loops allow us to easily deal with huge sets of data.

Say we have a form that requires none of the fields to be left blank. If we use the DOM to fetch every text input on the page, the DOM provides an array of every text input element. (I’ll tell you more about how the DOM does this in the next article.) We could check every value stored in that array one item at a time, sure, but that’s a lot of code and a maintenance nightmare.

If we use a loop to check each value, we won’t have to modify our script, regardless of how many fields are added to or removed from the page. Loops allow us to act on every item in an array, regardless of that array’s size. There are several ways to write a loop, but the for method is one of the most popular. The basic structure of a for loop is as follows:

for( initialize the variable; test the condition; alter the value; )
// do something

Here is an example of a for loop in action.

for( var i = 0; i <= 2; i++ ) {
alert( i ); // This loop will trigger three alerts, reading "0", "1",
and "2" respectively.

That’s a little dense, so let’s break it down part-by-part:

for ()

First, we’re calling the for statement, which is built into JavaScript. It says, “For every time this is true, do this.” Next we need to supply that statement with some information.

var i = 0;

This creates a new variable, i, with its value set to zero. You can tell it’s a variable by the single equals sign. More often than not you’ll see coders using the letter “i” (short for “index”) as the variable name, but keep in mind that you could use any variable name in its place. It’s a common convention, not a rule.

We set that initial value to “0” because we want to stay in the habit of counting from zero up. That’s where JavaScript starts counting, after all.

1 <=2;

With i <= 2;, we’re saying “for as long as i is less-than or equal to 2, keep on looping.” Since we’re counting from zero, that means the loop will run three times.


Finally, i++ is shorthand for “every time this loop runs, add one to the value of i (++ is one of the mathematical shortcut operators we saw earlier). Without this step, i would always equal zero, and the loop would run forever! Fortunately, modern browsers are smart enough not to let this happen. If one of these three pieces is missing, the loop simply won’t run at all.

Advanced Javascript development - Part 5, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.