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