JavaScript For Loops

There are two basic types of loops in JavaScript: For Loops, and While Loops. Today we’re going to take a look at the For Loop, find out when we’d want to use it, learn about the syntax, break down its structure, and finally learn about another type of for loop: the for…in loop.

For Loops in Javascript

When to Use For Loops

For Loops are useful when you need to iterate through something a set number of times. Let’s say, for instance, you wanted to count from one to one hundred. Rather than writing out one hundred lines, you could simply use a for loop to iterate through your values until you hit the end. You can also iterate based on the value of variables, such as a number entered by a use, or the number of items in an array.

For Loop Syntax

To do this, you simply need to tell the browser to do the same task until it hits the end point. Let’s take a look at the syntax:

for(var i = 0; i < 100; i++) {
console.log(i);
}

Let’s break it down:

  • We start with “for”, which simply tells the browser what kind of loops we’re running.
  • Inside the parentheses, we have three important parts, separated by semi-colons:
    • The first portion, called initialization, sets the starting point of the loop. “var i = 0” tells the browser to start at 0.
    • Next, we have our condition, which tells us when to stop. So long as our variable is less than 100, this loop keeps working.
    • Finally, we have to tell the browser what to do when it finishes each pass through the loop. In this case, we’re simply incrementing “i” by one each time.
  • Finally, the stuff we want to happen goes inside the curly-braces. In this case, we’re simply logging the value of our “i” variable every time.

Remember, we can change everything in this loop to make it do different things. For instance, if you changed “i < 100” to “i < 10”,the loop would only run 10 times. You could change “i++” to “i += 5”, this would increment our loop by 5 each time it runs.

For…In Loop

There’s also a special version of the For Loop, called the For…In Loop, which is used in objects. The idea is the same, except now we want to iterate through the various properties within an object. Let’s take a look at a sample:

var objectExample = {a:1. b:2, c:3};
for(var prop in objectExample) {
console.log(prop + ": " objectExample[prop]);
}

Once again, let’s break it down:

  • We start off by setting up a simple object, called “objectExample”.
  • Next, we start our for…in loop
  • Inside the parentheses, we setup the magic:
    • We declare a new variable called “prop”
    • We tell the loop to iterate through each property withing the object “objectExample”
  • Once again, the stuff we want to happen goes inside the curly braces. In our example, we’re logging a list of all the property names, followed by their value (e.g. “a: 1”).

While the syntax is slightly different, it does the exact same thing as a standard for loop, except that we’re working within an object.

So that’s for loops. Next time, we’ll take a look at while loops, and their special subs-species, the do/while loop.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>