How to Iterate Over Arrays in TypeScript?

In this tutorial, I will explain how to iterate over arrays in TypeScript using various methods and techniques. As a developer, you often need to work with arrays and perform operations on each element. TypeScript provides several ways to iterate over arrays, making it easier to manipulate and process data efficiently. Let me show you different methods to iterate an array in TypeScript.

1. Using the for Loop

One of the most basic ways to iterate over an array in TypeScript is by using a traditional for loop. Here’s an example:

const employees: string[] = ["John", "Emily", "Michael", "Jessica"];

for (let i = 0; i < employees.length; i++) {
  console.log(employees[i]);
}

In this example, we have an array called employees that contains the names of employees in a company. The for loop starts with an index i initialized to 0, and it continues to iterate as long as i is less than the length of the employees array. Inside the loop, we can access each element using employees[i] and perform any desired operations.

Here is the exact output in the screenshot below:

Iterate Over Arrays in TypeScript

Check out Add Elements to an Array in TypeScript

2. Iterate with for…of Loop

TypeScript also supports the for...of loop, which provides a more concise and readable way to iterate over arrays. Here’s an example:

const cities: string[] = ["New York", "Los Angeles", "Chicago", "Houston"];

for (const city of cities) {
  console.log(city);
}

In this case, we have an array called cities that contains the names of some major cities in the USA. The for...of loop automatically iterates over each element in the cities array, and we can directly access each city using the city variable inside the loop.

Here is the exact output in the screenshot below:

iterate over array in typescript

Read Remove an Item from an Array in TypeScript

3. Using the forEach Method

Another convenient way to iterate over arrays in TypeScript is by using the forEach method. This method takes a callback function that is executed for each element in the array. Here’s an example:

const products: string[] = ["iPhone", "MacBook", "iPad", "AirPods"];

products.forEach((product) => {
  console.log(product);
});

In this example, we have an array called products that contains the names of popular Apple products. The forEach method is called on the products array, and it takes an arrow function as the callback. Inside the callback, we can access each product using the product parameter and perform any desired operations.

Check out Check if a TypeScript Array Contains a Specific Value

4. Iterate Over an Array of Objects

In real-world scenarios, you often work with arrays of objects. TypeScript makes it easy to iterate over an array of objects and access their properties. Here’s an example:

interface Student {
  name: string;
  age: number;
  grade: string;
}

const students: Student[] = [
  { name: "Sarah", age: 18, grade: "A" },
  { name: "David", age: 17, grade: "B" },
  { name: "Emma", age: 19, grade: "A+" },
];

students.forEach((student) => {
  console.log(`Name: ${student.name}, Age: ${student.age}, Grade: ${student.grade}`);
});

In this example, we define an interface called Student that represents the structure of a student object. We then create an array called students that contains multiple student objects. Using the forEach method, we iterate over each student object and access its properties (name, age, and grade) within the callback function.

5. Using the map Method

When you need to transform each element in an array and create a new array based on the transformations, you can use the map method. Here’s an example:

const numbers: number[] = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

In this example, we have an array called numbers that contains some numeric values. We use the map method to create a new array called doubledNumbers, where each element is multiplied by 2. The map method takes a callback function that receives each element as a parameter (num) and returns the transformed value.

Read Append Elements to an Array in TypeScript

Filter Arrays with the filter Method

Sometimes, you need to filter an array based on certain criteria and create a new array with only the elements that satisfy the condition. The filter method comes in handy for such scenarios. Here’s an example:

const ages: number[] = [25, 18, 32, 14, 21];

const adultAges = ages.filter((age) => age >= 18);

console.log(adultAges); // Output: [25, 18, 32, 21]

In this example, we have an array called ages that represents the ages of different individuals. We use the filter method to create a new array called adultAges that only includes the ages greater than or equal to 18. The filter method takes a callback function that receives each age as a parameter (age) and returns true if the age satisfies the condition.

Conclusion

Iterating over arrays is very important in TypeScript, and there are various methods, such as using traditional for loops, for...of loops, forEach, map, or filter methods, etc. I hope this tutorial helps you understand how to iterate over arrays in TypeScript.

You may also like: