Typescript for Loop, for..of Loop, for-in Loop and forEach Examples

This tutorial shows how to use for loop, for..of loop, for-in loop and forEach in typescript with examples.

Table of contents:

1. for loop
2. for..of loop
3. for..in loop
4. Difference between for..of vs. for..in statements
5. Using a forEach loop

Learn typescript at TypeScript Tutorial with Examples.

1. for loop Examples

The for loop is used to execute a block of code a given number of times, which is specified by a condition.

Syntax:

for (first expression; second expression; third expression ) {
    // statements to be executed repeatedly
}

Simple for Loop Example

Let's create a file "for-loops.ts" and add the following code to it:

for(let i = 0; i < 5; i++){
    console.log("element " + i);
}

// Loop over an Array Using for Loop
typescript
let array = [10, 20, 30, 40];
for (let index = 0; index < array.length; index++) {
    const element = array[index];
    console.log(element);
}

Output:

C:\typescript-tutorial> tsc for-loops.ts
C:\typescript-tutorial> node for-loops.js
element 0
element 1
element 2
element 3
element 4
10
20
30
40

Loop over strings using for loop:

// Using traditional for loop 
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
for (var i = 0; i < programmingLangs.length; i++) {
    console.log(programmingLangs[i]);    
}

2. for..of loop Examples

In TypeScript, you can iterate over iterable objects (including array, map, set, string, arguments object and so on) using for...of loop.

// Example of using 'for...of' to iterate over array elements.
let array = [10, 20, 30, 40];
for (let val of array) {
    console.log(val); // prints values: 10, 20, 30, 40
}

//Example of using 'for...of' to iterate over a string.
let str = "Java Guides";

for (let char of str) {
  console.log(char); 
}

Output:

C:\typescript-tutorial> tsc for-loops.ts
C:\typescript-tutorial> node for-loops.js
10
20
30
40
J
a
v
a

G
u
i
d
e
s

Loop over an array of strings using for..of loop:

// Using “for…of” loop
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];
for(let element of programmingLangs){
    console.log(element);
}

3. for..in loop Examples

The for...in loop iterates through a list or collection and returns an index on each iteration.

// for...in Loop example
let intArray = [10, 20, 30, 40];

for (var index in intArray) {
  console.log(index); // prints indexes: 0, 1, 2, 3

  console.log(intArray[index]); // prints elements: 10, 20, 30, 40
}

// iterate over object properties example
let user = {
    "firstName" : "ramesh",
    "lastName" : "fadatare",
    "fullName" : "ramesh fadatare"
}

for (const key in user) {
    if (user.hasOwnProperty(key)) {
        const element = user[key];
        console.log(element);
    }
}

Output:

C:\typescript-tutorial> tsc for-loops.ts
C:\typescript-tutorial> node for-loops.js
0
10
1
20
2
30
3
40
ramesh
fadatare
ramesh fadatare

4. Difference between for..of vs. for..in statements

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

Here is an example that demonstrates this distinction:

let list = [4, 5, 6];

for (let i in list) {
    console.log(i); // "0", "1", "2",
}

for (let i of list) {
    console.log(i); // "4", "5", "6"
}

5. Using forEach

The forEach() method is an array method that is used to execute a function on each item in an array.

// Iterate Through Array
let programmingLangs : string[] = ['C', 'C++', 'Java', 'JavaScript'];

// using forEach() method
programmingLangs.forEach(element => {
    console.log(element);
});

Output:

C:\typescript-tutorial> tsc for-loops.ts
C:\typescript-tutorial> node for-loops.js
C
C++
Java
JavaScript

Learn typescript at TypeScript Tutorial with Examples.