JavaScript - For Loop




JavaScript - For Loop

Loops are used in JavaScript to perform repeated tasks based on a condition. Conditions typically return true or false when analysed. A loop will continue running until the defined condition returns false.

In this tutorial, you will learn about the loops and about for loops in JavaScript with the help of examples. In programming, loops are used to repeat a block of code. For example, if you want to show a message 100 times, then you can use a loop. It's just a simple example; you can achieve much more with loops. This tutorial focuses on JavaScript for loop. You will learn about the other type of loops in the upcoming tutorials.

JavaScript for loop

The syntax of the for loop is −

for(initialExpression; condition; updateExpression) {
    // for loop body
}

The initialExpression initializes and/or declares variables and executes only once.

The condition is evaluated, If the condition is false, the for loop is terminated. if the condition is true, the block of code inside of the for loop is executed.

The updateExpression updates the value of initialExpression when the condition is true.

The condition is evaluated again.This process continues until the condition is false.

Example

// program to display text 10 times
let n = 6;

// looping from i = 1 to 6
for (let i = 1; i <= n; i++) {
    console.log(`I love JavaScript.`);
}

Output

I love JavaScript.
I love JavaScript.
I love JavaScript.
I love JavaScript.
I love JavaScript.

What is an JavaScript For Loop ?

JavaScript for loops run a block of code as long as a specified condition is true. JavaScript for loops take three arguments: initialization, condition, and increment. Every loop the condition expression is evaluated and continues if the expression returns true, or ends if it returns false.

Loops are a core feature of programming used to repeat similar tasks. They will repeat the same block of code until a certain condition is met, and are useful for many repetitive programming tasks.

For example, you may have two lists of names—first names and surnames—that you want to merge into a list of full names. You could write a line of code for every name, but that could require hundreds of lines of code if the list is long. In addition, what if you aren’t sure how long the list will be? Here you could use a loop that repeats a similar block of code merging each list item.

There are two main types of loops used in JavaScript: while loops and for loops. While loops are based on a condition and run while that condition is equal to true. For loops, on the other hand, run while a certain set of conditions are true, and can count the number of iterations the loop makes. In this guide, we are going to explore the basics of JavaScript for loops. We’ll also discuss the for... in and for...of JavaScript loops, and use a few examples to illustrate how these loops work in JavaScript.

For Loops

The for loop is a type of loop that allows you to repeat through a block of code as long as a specific condition is met. The syntax for a for loop is as follows −

for (initialization; condition; increment) {
	// Execute code
}

This syntax is rather complex, so let’s break it down and define each term we have used.

Initialization is used to declare the counter variables that we use to keep track of how many times our loop has been executed.

Condition is the condition that is evaluated before each loop starts. If the condition is equal to true, the code within the for loop will run; if the condition becomes false, the loop will stop running.

Increment updates the loop counter each time the loop executed.

JavaScript for loops can use different syntax depending on the JavaScript flavor you're using: ES5 (ECMAScipt5), ES6 (ECMAScript6), ES2016 (ES7/ECMAScript7) or TypeScript. Up next you'll learn the differences between each for loop in terms of syntax, features and behaviors.

The JavaScript for loop you're most likely to encounter to this day uses an ES5 compliant syntax, which is actually part of the ES3 standard. Listing 4-1 illustrates two options of this classic JavaScript for loop syntax.

For Loop

for ([initialization]); [condition]; [final-expression]) {
   // statement
}

The javascript for statement consists of three expressions and a statement -

A for-loop is a control flow statement which is used to execute a block of code a number of times. The flow of the for-loop is specified after each execution of the code block (called an iteration). Imagine a situation where you have to do a certain task a hundred times. How would you do that? You could type the command to achieve the task a hundred times, or maybe copy-paste it repeatedly. Of course, that would be quite tedious. This is where loops come into use. When using a for-loop, those hundred lines of code can be written in as few as three to four statements.

Syntax

/* for-loop syntax in JavaScript */
for (variable_initialize; condition; change_variable) {
  // code block to be executed
}

Arguments

Variable_initialize (optional) - This statement is executed once before the execution of the for-loop code block. This is used to define the counter variable etc. you might be using to control the flow.

condition - This statement defines the condition on which the control flow (each iteration) of the for-loop depends.

change_variable - This statement is executed after each iteration of the for-loop. This can be used to update the initialized control variable.

Note - variable_initialize is optional since you can use an already initialized variable instead. Do not forget the ; following the variable_initialize even if you decide to skip it.