TypeScript Array forEach()

In this chapter, we will explore the forEach() method for arrays in TypeScript. This method is a built-in function that executes a provided function once for each array element. Understanding how to use forEach() is useful for iterating over arrays and performing operations on each element.

Table of Contents

1. Definition
2. Syntax
3. Examples
4. Conclusion

1. Definition

The forEach() method executes a provided function once for each array element. It is primarily used to iterate over arrays and perform actions for each element.

2. Syntax

array.forEach(callback(element, index, array), thisArg?);

Parameters

• callback: A function to execute on each element, taking three arguments:
  • element: The current element being processed in the array.
  • index (optional): The index of the current element being processed in the array.
  • array (optional): The array forEach was called upon.
• thisArg (optional): Value to use as this when executing callback.

Return Value

The forEach() method returns undefined.

3. Examples

Let's look at some examples to understand how forEach() works in TypeScript.

Example 1: Basic Usage

In this example, we use forEach() to log each element in the array to the console.

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
// Output:
// 1
// 2
// 3
// 4
// 5

Example 2: Using Index in Callback

In this example, we use the index parameter to log the index and the element.

let fruits: string[] = ["apple", "banana", "mango"];
fruits.forEach((fruit, index) => {
  console.log(`Index: ${index}, Fruit: ${fruit}`);
});
// Output:
// Index: 0, Fruit: apple
// Index: 1, Fruit: banana
// Index: 2, Fruit: mango

Example 3: Using Array in Callback

In this example, we use the array parameter within the callback function.

let letters: string[] = ["a", "b", "c"];
letters.forEach((letter, index, arr) => {
  console.log(`Letter: ${letter}, Original Array: ${arr}`);
});
// Output:
// Letter: a, Original Array: a,b,c
// Letter: b, Original Array: a,b,c
// Letter: c, Original Array: a,b,c

Example 4: Modifying Elements

In this example, we use forEach() to modify each element in the array. Note that the forEach() method itself cannot be used to modify the original array directly.

let numbers: number[] = [1, 2, 3, 4, 5];
numbers.forEach((num, index, arr) => {
  arr[index] = num * 2;
});
console.log(numbers); // Output: [2, 4, 6, 8, 10]

Example 5: Summing Array Elements

In this example, we use forEach() to calculate the sum of all elements in an array.

let numbers: number[] = [1, 2, 3, 4, 5];
let sum: number = 0;
numbers.forEach((num) => {
  sum += num;
});
console.log(sum); // Output: 15

4. Conclusion

In this chapter, we explored the forEach() method for arrays in TypeScript, which is used to execute a provided function once for each array element. We covered its definition, syntax, parameters, return value, and provided several examples to demonstrate its usage. Understanding how to use forEach() effectively can help in various array manipulation tasks in TypeScript, especially when iterating over arrays and performing operations on each element.