In this tutorial, I will explain how to master the use of for loops with arrays in TypeScript. As a developer working on various projects, I encountered several challenges when iterating over arrays. I thought of writing a complete tutorial and sharing my experience and solutions regarding using loops with TypeScript arrays.
Use TypeScript For Loops with Arrays
For loops allow you to iterate over arrays and perform operations on each element in TypeScript.
TypeScript offers several types of for loops, each with its unique use cases:
- Standard For Loop
- For…of Loop
- For…in Loop
- forEach Method
Standard For Loop
The standard for loop is a staple in programming. It gives you complete control over the iteration process. Here’s an example where I needed to calculate the total sales for a week in a Los Angeles-based retail store:
let sales: number[] = [1500, 2200, 1800, 1700, 2100, 2300, 2500];
let totalSales: number = 0;
for (let i = 0; i < sales.length; i++) {
totalSales += sales[i];
}
console.log(`Total Sales: $${totalSales}`);
In this example, the loop iterates over the sales
array, summing up the daily sales to get the total sales for the week.
Here is the exact output in the screenshot below:

Check out How to Use For Loop Range in TypeScript?
For…of Loop
The for...of
loop is more concise and is perfect for iterating over the values of an array. Let’s say you’re managing a list of popular tourist destinations in the USA, and you want to print each destination:
let destinations: string[] = ["Grand Canyon", "Yellowstone", "Yosemite", "Zion", "Glacier"];
for (let destination of destinations) {
console.log(destination);
}
This loop directly accesses each element in the destinations
array, making the code cleaner and easier to read.
For…in Loop
The for...in
loop iterates over the keys or indices of an array. This can be useful when you need to access both the index and the value. Here’s an example where I needed to log the index and name of employees in a Chicago-based tech company:
let employees: string[] = ["Alice", "Bob", "Charlie", "Diana", "Eve"];
for (let index in employees) {
console.log(`Employee ${parseInt(index) + 1}: ${employees[index]}`);
}
This loop provides access to the index, which can be useful for certain operations.
Here is the exact output in the screenshot below:

Read How to Use the Break Statement in TypeScript For Loops?
forEach Method
The forEach
method is a higher-order function that executes a provided function once for each array element in TypeScript. This is particularly useful for functional programming. Here’s an example where I needed to apply a discount to a list of product prices in a Miami-based e-commerce store:
let prices: number[] = [100, 200, 300, 400, 500];
let discount: number = 0.1;
prices.forEach((price, index, arr) => {
arr[index] = price * (1 - discount);
});
console.log(prices);
The forEach
method applies the discount to each price in the array, modifying the original array.
Check out How to Use the Continue Statement in TypeScript For Loops?
Handling Complex Data Structures
In real-world applications, you often deal with complex data structures. Here’s an example where I needed to process an array of customer orders in a San Francisco-based online store:
interface Order {
orderId: number;
customerName: string;
amount: number;
status: string;
}
let orders: Order[] = [
{ orderId: 1, customerName: "John Doe", amount: 250, status: "Shipped" },
{ orderId: 2, customerName: "Jane Smith", amount: 450, status: "Pending" },
{ orderId: 3, customerName: "Sam Johnson", amount: 300, status: "Delivered" },
];
for (let order of orders) {
if (order.status === "Pending") {
console.log(`Order ${order.orderId} for ${order.customerName} is pending.`);
}
}
This example demonstrates how to iterate over an array of objects and perform conditional operations based on object properties.
Read How to Get Index in forEach Loop in TypeScript?
Optimizing Performance with TypeScript For Loops
When working with large datasets, performance can become an issue. Here are some tips to optimize your for loops:
- Avoid Re-calculating Length: Calculate the array length once before the loop starts.
- Use
for...of
for Readability: Whilefor...of
is slightly slower than a standard for loop, its readability often outweighs the performance cost for small to medium datasets. - Minimize Function Calls: Inline simple operations within the loop to reduce function call overhead.
Example of Optimization
Here’s an optimized version of the standard for loop example:
let sales: number[] = [1500, 2200, 1800, 1700, 2100, 2300, 2500];
let totalSales: number = 0;
let length: number = sales.length;
for (let i = 0; i < length; i++) {
totalSales += sales[i];
}
console.log(`Total Sales: $${totalSales}`);
By storing the array length in a variable, we avoid recalculating it in each iteration, which improves performance.
Conclusion
In this tutorial, I explained how to use TypeScript For Loops with Arrays. With some examples, we covered for loop, for…of loop, for…in loop, and forEach method, etc.
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.