Typescript for loop repeats a group of statements until a specified condition evaluates to false. The for loop allows us to specify an initialization expression, condition, and final expression as part of the loop syntax.
Table of Contents
For Loop
The syntax of the for loop is as below.
It starts with for keyword followed by three optional expressions inside parentheses separated by semi-colons. Finally, a block of statements inside curly braces follows them. These block statements execute for each iteration of the loop.
1 2 3 4 5 | for ([initial-expression]; [condition]; [final-expression]) { statements } |
The three optional expressions are
- Initial-expression
- Condition
- Final-expression
Initial Expression
The initial-expression
is the expression, that typescript executes at the beginning of the loop. It runs only once.
- Initial-expression is optional
- You can execute any expression here including complex expressions.
- The main purpose of it to initialize the loop counters using assignment expressions
- You can also declare variables here using var & let.
- Variables declared with
let
are local to the statement. - Variables declared with
var
are not local to the loop, You can access them outside the loop also - The result of this expression is discarded.
Condition
The condition
is evaluated before the beginning of each iteration of the loop. If the condition
returns true, then it executes the block of statements. If returns false the loop terminates.
condition
is optional. An empty condition returns true.
Final Expression
For Loop executes the final expression at the end of each iteration of the loop and before the next evaluation of the condition
The main purpose of it is to increment or update the loop counter.
Statements
A statement that is executed as long as the condition evaluates to true.
Use the block { ... }
to group the multiple statements together. For a single statement, no need to use { ... }
You can also use an empty statement just by adding ;
How it works
When a For
loop executes, the following occurs
- Executes the
initial-expression
. This runs only once - Evaluates the
condition
. If the value is True then continue to step 3. If false the loop terminates. - Executes the statements.
- Executes the final-expression.
- Control returns to Step 2.
For Loop Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | for (let i = 0; i < 5; i++) { console.log(i); } console.log("End of Loop"); *** Console *** 0 1 2 3 4 End of Loop |
- The expression
let i = 0
is the initial-expression and runs only once. It initializes the loop local variable i with a value of 0 i < 5
is thecondition
, which returns true as long as thei
is less than 5. Hence the loop continues. If it returns false, the loop terminates.- The loop runs for the first time and statements inside the
{ }
executes. - The final-expression
i++
executes. Which increments the value ofi
by 1 - Now, the control returns to step 2
let is local to the for loop
In the example above we used the let
to declare the loop variable i
. Hence its scope is local to the loop body. Trying to use outside the loop will result in the error Error: i is not defined
.
1 2 3 4 5 6 7 8 9 | for (let i = 0; i < 5; i++) { console.log(i); } console.log(i); //i is not defined |
var is available outside the for loop.
We can also use var
to declare the variable, in that case, you can use the variable outside the For loop.
1 2 3 4 5 6 7 | for (var i = 0; i < 5; i++) { console.log(i); } console.log(i); //5 |
Initial expression is optional
We can also initialize the initial value outside the for loop and keep the initial-expression empty
1 2 3 4 5 6 7 | let i = 0; for (; i < 5; i++) { console.log(i); } |
Condition is also optional
The condition is also optional, But an empty condition is treated as True. Hence this will create an infinite loop
1 2 3 4 5 6 | let i = 0; for (; ; i++) { console.log(i); } |
Use Break statement to break out of the loop
You can use the break statement to break out of a For loop.
1 2 3 4 5 6 7 8 9 10 | let i = 0; for (; ; i++) { if (i >= 5) break; console.log(i); } |
Final Expression is also optional
In the following example Initial Expression, condition & final expression is empty.
We initialize the value of the counter before entering the loop. Check the condition in the loop body. Also, execute the Final expression as the last statement of the loop.
1 2 3 4 5 6 7 8 | let i = 0; for (;;) { if (i >= 5) break; console.log(i); i++; } |
The above is equivalent to the following code.
1 2 3 4 5 | for (let i = 0; i < 5; i++) { console.log(i); } |
Skipping an Iteration
Use the continue statement to skip the rest of the for loop and move over to the next iteration. The following example, will not print the 0 & 1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let i = 0; for (let i = 0; i < 5; i++) { if (i < 2) continue; console.log(i); } ** Output ** 2 3 4 |
Loop Backwards
You can also go backward. Start the count from 5 and decrement in each iteration.
1 2 3 4 5 6 7 8 9 10 11 12 13 | let i = 0; for (let i = 5; i > 0; i--) { console.log(i); } *** Console ** 5 4 3 2 1 |
Complex Expressions
We can also include complex expressions in Initial & final expressions
1 2 3 4 5 | for (let i = 0, j = 0; i < 5; i = j + 1, j++, i++) { console.log(i + j); } |
Statement body is also optional
In the following code, we do not have for the body.
1 2 3 4 5 6 7 | let sum = 0; for (let i = 0; i <= 5; sum = sum + i, i++); console.log(sum); |
For Loop More Examples
1 2 3 4 5 6 7 | let persons = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth"); for (let i=0; i<persons.length;i++) { console.log(persons[i]); } |