In this tutorial, I will explain how to use the TypeScript forEach
loop with an index. The forEach
method is an array iteration method that executes a provided function once for each array element. It takes a callback function that is executed on each element and an optional thisArg
parameter. The forEach() method in TypeScript calls a specified function for each element in an array.
Syntax of the TypeScript forEach Loop
The basic syntax of the forEach
loop in TypeScript is as follows:
array.forEach(function(currentValue, index, arr), thisArg)
Here’s what each parameter means:
currentValue
: The current element being processed in the array.index
: The index of the current element being processed in the array.arr
: The array thatforEach()
is being applied to.thisArg
: An optional parameter to use asthis
when executing the callback.
The forEach() method is an iterative method. It calls a provided callbackFn function once for each element in an array in ascending-index order.
Check out How to Use for…of Loops in TypeScript?
Using the TypeScript forEach Loop with Index
Let’s take a look at an example of using the forEach
loop with an index in TypeScript. Suppose we have an array of names of US states:
const states = ['California', 'Texas', 'Florida', 'New York', 'Illinois'];
We can use the forEach
loop to iterate over each element of the array and log the state name along with its index:
states.forEach((state, index) => {
console.log(`State at index ${index}: ${state}`);
});
The output will be:
State at index 0: California
State at index 1: Texas
State at index 2: Florida
State at index 3: New York
State at index 4: Illinois
Here is the exact output in the screenshot below:

TypeScript introduces a foreach loop that allows us to access both the element and its index within the loop.
Check out How to Use for…in Loops in TypeScript?
Using the TypeScript forEach Loop with Objects
We can also use the forEach
loop to iterate over an array of objects in TypeScript. Let’s consider an array of US presidents:
const presidents = [
{ name: 'George Washington', term: '1789-1797' },
{ name: 'John Adams', term: '1797-1801' },
{ name: 'Thomas Jefferson', term: '1801-1809' },
];
We can use the forEach
loop to access each president’s name and term:
presidents.forEach((president, index) => {
console.log(`President ${index + 1}: ${president.name} (${president.term})`);
});
The output will be:
President 1: George Washington (1789-1797)
President 2: John Adams (1797-1801)
President 3: Thomas Jefferson (1801-1809)
The forEach method in TypeScript is an array iteration method that executes a provided function once for each array element.
You can also see the output in the screenshot below:

Conclusion
In this tutorial, we learned how to use the TypeScript forEach
loop with an index. We explored the syntax of the forEach
loop and saw examples of using it with arrays of primitive values and objects. The forEach
loop provides an easy way to iterate over array elements while having access to both the element and its index.
You may also like:
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.