TypeScript Array forEach()

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.