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:

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:

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:
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.