javascript for journalists

Since we've mastered the concept of arrays, it's important to learn how to use for-loops, which takes advantage of the index part of the array. As you recall, the index is the the part of the array that specifies which data element we want to retrieve.

var someArray[index];

There are times in which we want to repeat a piece of code over and over again. This is called a loop. Why do we want to repeat a piece of code? The most typical example of a loop is the ability to iterate through a large data set—like that of an array, changing or retrieving values. There are actuallyserveral different types of loops in JavaScript, four of them are:

1. For Loop
2. While Loop
3. Do ... While Loop
4. For .. In Loop

Structure of a For Loop

The most common loop is the for-loop, which uses the For keyword. It is best to master the for-loop first before learning the others. In many cases, the for-loop can accomplish the same results as the others, but using more verbose language. 

The for-loop consists of three parts. 1) A start value, 2) A condition and 3) An increment. Each is separated by semi-colons.

for(start value; condition; increment){
	//code that will be executed over and over
}

The for-loop is designed to count from the start value you set—while executing the code you specify—until the condition is met. It counts by increments you give in the third part of the expression. This is a basic example of the for loop:

for(var i=0; i < 20; i=i+1){
	//code will execute 20 times
}

In the above example, we set i = 0 as our start value. The variable we created, i, is also called the iterator because it iterates each time the loop is run. The for-loop will run the code between the curly braces as long as the condition i < 20 is true. Each time the code is run, the last part of the for-loop, called the increment will execute. In our case, we increment our variable by one each time using i = i + 1. When we are using the increment to increase the value by only 1, it is often typed shorthand using i++, which is a method of increasing any number variable by one.

Here is another example of using a for-loop:

for(var i=0; i < 5; i++){
	document.write("some text <br />");
}

output:
some text
some text
some text
some text
some text

From the above example, you can see when we run the loop, it writes the text to the screen five times. In our for-loop, we initialized the i variable as zero, and we increment it by one until the condition i < 5 is met. Once the i variable hits five, the for loop terminates, and the rest of the program continues after it.

Using the Iterator in a For Loop

The iterator, or i variable, can be used within the loop, like so:

for(var i=0; i < 5; i++){
	document.write("The value of i is: " + i + " <br />");
}

output:
The value of i is: 0
The value of i is: 1
The value of i is: 2
The value of i is: 3
The value of i is: 4

As we see from the example above, the i variable increases by one each time. It starts on zero because that is what we specified during the first part of the for-loop. It never hits five, because our condition prohibits it.

Using the iterator is a powerful tool because it works as the index of an array.

var myarray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];

for(var i=0; i < 10; i++){
	document.write(myarray[i]);
}

output:
abcdefghij

As we see above, we can use the i variable to reference each item in the array, and write it to the screen. It might not seem like it with this small example, but for-loops are powerful it terms of going through very large dataset, and quickly referencing hundreds, or thousands, of items.

We can also use the .length property to determine the length of an array dynamically. This allows us to set our condition in a way so that if items are ever added to the array, we don't have to modify our for-loop.

var myarray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];

for(var i=0; i < myarray.length; i++){
	document.write(myarray[i]);
}

Changing the Increment or Start Values

Although it's rare done, it is possible to change the increment in such a way that we step through the counter at different increments. Observe this example:

for(var i=0; i < 10; i += 2){
	document.write(i + "<br />");
}

output:
0
2
4
6
8

In the above example, we increment i by two each time. This way, as it counts, it reaches the condition faster. We can also use the increment do decrease (or decrement) the value, like so:

for(var i=10; i &gt 0; i--){
	document.write(i + "<br />");
}

output:
10
9
8
7
6
5
4
3
2
1

In the above example, we used the for-loop to count backwards. We also started the i variable at 10, and we changed our condition so that it was a true statement as long as the value of i was above zero. It isn't often that we do this, but there are situations when this comes in handy.