How to Use the TypeScript forEach Loop with Index?

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 that forEach() is being applied to.
  • thisArg: An optional parameter to use as this 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 forEach Loop with Index

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:

TypeScript forEach Loop index with Objects

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: