TypeScript - how to use foreach?

In this article, we're going to have a look at how to use for-each loop in TypeScript.

Quick solution:

xxxxxxxxxx

const array: string[] = ['item 1', 'item 2', 'item 3'];

​

array.forEach((item: string, index: number): void => {

  console.log('index ' + index + ': ' + item);

});

​

// or

​

for (const item of array) {

  console.log(item);

}

There are 3 ways how we can do it:

• for-of loop to work with arrays,
• for-in loop to work with arrays and objects,
• forEach method to work with arrays.

See below examples to see practical examples.

This section shows how to use shortened loop construction iterating over arrays.

This section shows how to use for-of loop construction to iterate over array.

xxxxxxxxxx

const array: string[] = ['item 1', 'item 2', 'item 3'];

​

for (const item of array) {

  console.log(item);

}

Output:

xxxxxxxxxx

item 1

item 2

item 3

Note: for-of loop was introduced in ES6 (ECMAScript 2015).

This section shows how to use for-in loop construction to iterate over the array.

xxxxxxxxxx

const array: string[] = ['item 1', 'item 2', 'item 3'];

​

for (const key in array) {

  if (array.hasOwnProperty(key)) {

    console.log(array[key]);

  }

}

Output:

xxxxxxxxxx

item 1

item 2

item 3

Note: using for-in loop with array is risky because of possible additional array properties - array.hasOwnProperty(key) method solves the problem.

This section shows how to use forEach method to iterate over an array.

xxxxxxxxxx

const array: string[] = ['item 1', 'item 2', 'item 3'];

​

array.forEach((item: string, index: number): void => {

  console.log('index ' + index + ': ' + item);

});

Output:

xxxxxxxxxx

index 0: item 1

index 1: item 2

index 2: item 3

Note: Array.prototype.forEach method was introduced in ES5 (ECMAScript 2009).

This section shows how to use for-in loop construction to iterate over object properties. It is very important to use hasOwnProperty method to check if each property is part of the iterated object.

xxxxxxxxxx

interface MyObject {

  key1: string;

  key2: string;

  key3: string;

}

​

const object: MyObject = {

  key1: 'value 1',

  key2: 'value 2',

  key3: 'value 3',

};

​

for (const key in object) {

  if (object.hasOwnProperty(key)) {

    const value: string = object[key];

​

    console.log(key + ': ' + value);

  }

}

Output:

xxxxxxxxxx

key1: value 1

key2: value 2

key3: value 3