1. javascript
  2. /for loop

JavaScript For Loop

In JavaScript, a loop is a control flow statement that allows you to repeat a block of code multiple times. There are several types of loops in JavaScript, including the for loop, the while loop, and the do...while loop.

Here is an example of a for loop in JavaScript:

for (var i = 0; i < 10; i++) {
    // Execute this code block 10 times
    console.log(i);
}

The for loop above will execute the code block 10 times, starting at 0 and ending at 9. The variable i is used to keep track of the current iteration of the loop, and is incremented by 1 on each iteration.

Here is an example of a while loop in JavaScript:

var i = 0;
while (i < 10) {
    // Execute this code block while i is less than 10
    console.log(i);
    i++;
}

In this demo, the while loop will execute the code block while the value of i is less than 10. The value of i is incremented by 1 on each iteration of the loop, using the postfix increment operator (i++).

The for loop is a powerful control flow statement that allows you to easily iterate over a sequence of values, such as the elements in an array. It can be used to perform a specific action for each element in the sequence, or to collect values from the sequence into a new data structure.

One common use of the for loop is to iterate over the elements in an array and perform a specific action for each element. For example, you could use a for loop to print each element in an array to the console, like this:

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

Another common use of the for loop is to collect values from a sequence into a new data structure. For example, you could use a for loop to create a new array that contains only the even numbers from another array, like this:

var array = [1, 2, 3, 4, 5];
var evenNumbers = [];
for (var i = 0; i < array.length; i++) {
    if (array[i] % 2 === 0) {
        evenNumbers.push(array[i]);
    }
}

Another thing to keep in mind when using the JavaScript for loop is that you can use multiple counter variables to iterate over a multi-dimensional data structure, such as a two-dimensional array. For example, you could use a for loop with two counter variables, i and j, to iterate over the elements in a two-dimensional array, like this:

var array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
for (var i = 0; i < array.length; i++) {
    for (var j = 0; j < array[i].length; j++) {
        console.log(array[i][j]);
    }
}

In this example, the outer for loop is used to iterate over the rows in the array, and the inner for loop is used to iterate over the columns in each row. This allows you to access each element in the array and do something with it, such as print it to the console.

Further Learning

Frequently Asked Questions about the JavaScript For Loop

1. How do you loop through the elements in an array?

Yes, a for loop can be used to iterate over the properties of an object as well as the elements of an array. In fact, the for-in loop is specifically designed to iterate over the properties of an object. For example, the following code uses a for-in loop to iterate over the properties of an object and print their keys and values:

const obj = {
  name: "John",
  age: 30,
  job: "teacher"
};

for (let key in obj) {
  console.log(`${key}: ${obj[key]}`);
}
2. How can the `break` and `continue` statements be used with a `for` loop to control the flow of the loop?

The break statement can be used to immediately exit the loop and continue execution of the code after the loop, while the continue statement can be used to immediately skip to the next iteration of the loop, without executing the remaining code in the current iteration.

3. Are there any differences between a `for` loop and a `while` loop in JavaScript?

Yes. The for loop is typically used when you know in advance how many times the loop should run, whereas the while loop is used when you don't know how many times the loop should run and want to continue looping until a certain condition is met.

Other Resources Around the Web

LoopInJavascript.com - an entire site about JavaScript loops

Loops and iteration on the MDN web docs

Advanced Loops video on YouTube