This chapter is from the book
This chapter is from the book
This chapter is from the book
Loops
A loop will execute a block of code over and over until you tell it to stop. It can iterate through data or HTML. For our purposes we’ll mostly be looping through data. Much the way a function is a chunk of JavaScript code, a loop can make that function execute over and over—like a little buddy you have to do your repetitive tasks for you. And they’re built right into the language!
For this one, we need some data to loop through. We’ll be using contact information for the data and saving it to a JSON object called “contacts.” Listing 6.5 shows a small sample of the contact information we’ll be looping through. I find it easier to work with data that represents people, because when something goes wrong with one of the items it’s more difficult to get angry at someone you know than it is at anything else. Feel free to substitute your own friends or family in the data so you don’t get frustrated if something goes wrong.
Listing 6.5. Creating Data in a JSON Object
var contacts = {
"addressBook" : [
{
"name": "hillisha",
"email": "hill@example.com",
},
{
"name": "paul",
"email": "cleveland@example.com",
},
{
"name": "vishaal",
"email": "vish@example.com",
},
{
"name": "mike",
"email": "grady@example.com",
},
{
"name": "jamie",
"email": "dusted@example.com",
}
]
};
for Loop
There are few different types of loops in JavaScript, a while loop, a do-while loop, and a for loop. Most of them are perfectly fine; I would avoid the foreach loop because it’s known to be a performance hog, but the others are fine to use. A while loop and a for loop are basically the same thing, but the for loop is a little more direct, to the point, and it’s the most common kind of loop you’re going to find in the wild. In all the years I’ve been writing JavaScript, it’s been 99% for loops. With that in mind, we’re going to go over the for loop in this book.
Listing 6.5.1 will show you a basic for loop, and then we’ll go over what’s happening.
Listing 6.5.1. A for Loop Integrating Address Book Data
/* cache some initial variables */
var object = contacts.addressBook,
contactsCount = object.length,
i;
/* loop through each JSON object item until you hit #5, then stop */
for (i = 0; i < contactsCount; i = i + 1) {
// code you want to execute over and over again
} // end for loop
Right away, you can see that we’re saving some information to variables. The first variable “object” is saving the JSON object we create to a variable so it’s a little easier to work with. The second variable, “contactsCount”, looks through the JSON object and counts the number of items in there. This will let us know how many times to loop through the data. The third variable, “i”, is just a way to declare the counting variable for our loop. Later on we’ll be setting the value.
Inside the for you can see three statements. The first statement is setting the counter variable (i) to its initial value of 0 (we start at 0). The second statement is the condition in which you run the loop. As long as the “i” value is less than the overall count of items in the data, it should execute the code contained inside the loop brackets { }. The last statement takes the “i” value and adds 1 to it each time the loop executes until it’s no longer less than the overall count. In our case, this loop will execute 5 times because there are five people in the address book.
Listing 6.5.2 will show the actual loop to iterate through the address book data saved to the JSON object, and then, using the innerHTML DOM method, output the result into the document’s <body> element. Besides the output, a main difference to note in Listing 6.5.2 is that we’re now running a check on the contactsCount variable to make sure it’s greater than 0 before continuing onto the loop. This is a general best practice to prevent unnecessary code from executing should there be an error with the data.
Listing 6.5.2. A for Loop Integrating Address Book Data
/* cache some initial variables */
var object = contacts.addressBook, // save the data object
contactsCount = object.length, // how many items in the JSON object? "5"
target = document.getElementsByTagName("body")[0], // where you're outputting the data
i; // declare the "i" variable for later use in the loop
/* before doing anything make sure there are contacts to loop through */
if(contactsCount > 0) {
/* loop through each JSON object item until you hit #5, then stop */
for (i = 0; i < contactsCount; i = i + 1) {
/* inside the loop "i" is the array index */
var item = object[i],
name = item.name,
email = item.email;
/* insert each person's name & mailto link in the HTML */
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a></p>';
}
}
It’s nice to be rid of that annoying alert box, isn’t it? Rather than alerting each value, we are now choosing a target within the HTML document (<body> element) and outputting the data there. This is more along the lines of what you’ll be doing in the real world, so we’ll be doing that now instead of using the alert() method.
Performance Considerations
As mentioned in an earlier chapter, JavaScript, by nature, is blocking. That means it will stop the download of other objects on the page until it is finished with its business. This can be very evident when dealing with loops. The data we’re dealing with here is only five items in length, so there isn’t a problem executing this block of code 5 times. However, as the number of elements you’re looping through increases, so will the time it takes to iterate over them. This is important to note when you’re looping through a lot of items because it can really bog down the loading time of a page.
Any variable that doesn’t change and can be defined outside the loop should be defined outside the loop. You’ll notice in our loop that there is a variable called contactsCount; it is defined outside the loop and then referenced within. We can do this because the length of the data never changes while the information is being looped through. If it were inside the loop, the length would have to be recalculated each time the loop ran, which can get very resource intensive. Little things like that can help you conserve resources when you’re working with loops.