For Loops

For loops are a convenient way to iterate through an array.

var letters = ['a', 'b', 'c'];
for(var i = 0; i < letters.length; i++) {
  console.log("letter: " + letters[i] + ", count: " + i)
}

The for loop prints the following to the console:

letter: a, count: 0
letter: b, count: 1
letter: c, count: 2

The syntax of a for loop always looks like this: for(var = counter variable = counter value; counter variable < end condition; counter variable increments) {(code to be executed)}

Let's use the example above to see how this works. Here's a breakdown of each component of the for loop: * var i = 0 | Sets the counter variable i to 0. The loop will begin counting at 0. * i < letters.length | Sets the end condition of i to letters.length — in this case, the loop will stop counting at 2. * i ++ | Sets the increments for the variable i. Here, we're counting by 1.

All told, the for loop will begin with 0 and count up by 1 until it reaches 2. The code inside the for loop will execute through each iteration. We're passing the variable i to the code block each time, which results in a different output. When i = 0, letter[i] is a; when i = 1, letter [i] = b; and so on.

Here is another example:

var coolCountries = ['vietnam', 'colombia', 'india'];
for(var i = 0; i < coolCountries.length; i++) {
  var love = "I love " + coolCountries[i];
  console.log(love);
}

The for loop prints this output to the console:

I love vietnam
I love colombia
I love india

The for loop initially sets the counter variable i to 0, tells the loop to iterate while i is smaller than coolCountries.length, and increments i during each iteration (i++).

A while loop can be used to do the same thing as a for loop.

var coolCountries = ['vietnam', 'colombia', 'india'];
var i = 0;
while(i < coolCountries.length) {
  var love = "I love " + coolCountries[i];
  console.log(love);
  i++;
}

A for loop is just a rearranged version of a while loop (and vice versa), though for loops are more common in JavaScript. You will encounter for loops frequently.

Question Click to View Answer

What does the following code print to the console?

var weird = ['sponge', 'bob'];
var result = "";
for(var i = 0; i < weird.length; i++) {
  result = result + weird[i];
}
console.log(result);

spongebob

The for loop iterates through every element of the weird array and concatenates each string in the array with the result string. After the loop is finished, the result is printed to the console.

What does the following code print to the console?

var nums = [1, 1, 2, 3, 5, 8];
var result = 0;
for(var i = 0; i < nums.length; i++) {
  result = result + nums[i];
}
console.log(result);

20

The for loop iterates through every element of the nums array and tracks the running sum in the result variable. After the loop is finished, the result variable is printed to the console.

Write a for loop that prints the same result to the console as this while loop.

var smarties = ['knuth', 'joy'];
var i = 0;
while(i < smarties.length) {
  console.log(smarties[i] + " is smart!");
  i++;
}
var smarties = ['knuth', 'joy'];
for(var i = 0; i < smarties.length; i++) {
  console.log(smarties[i] + " is smart!");
}

The for loop is similar to the while loop, but it only takes 4 lines of code instead of 6.

<-- Previous (Math Object) Next (Nested Arrays) -->