TypeScript for Loops

The for loop is one of the most widely used loops in TypeScript, helping developers iterate over collections, arrays, or even execute code a specific number of times. This lesson will cover the basics of the for loop in TypeScript, including syntax, examples, and best practices, with real-world context to make it relatable and easy to understand.

Introduction to for Loop in TypeScript

The first question might comes in your mind is why do we need the for loop?

In programming, repetitive tasks are common. For example:

• Checking every item in a shopping cart to calculate the total price.
• Processing a list of students to print their grades.
• Iterating through rows in a table to find specific data.

Instead of writing the same code multiple times, the for loop provides an efficient way to repeat tasks dynamically, based on conditions.

Scenario: Imagine you're managing an e-commerce application. You want to calculate the total price of all items in a shopping cart. Instead of manually summing up each item's price, you can use a for loop to iterate through the cart, add up the prices, and dynamically handle any number of items.

This real-world scenario illustrates how the for loop simplifies repetitive tasks and makes code adaptable to different data sizes.

Syntax of TypeScript for Loop

The for loop has a simple structure in TypeScript:

1
2
3
for (initialization; condition; increment) {
  // Code to execute in each iteration
}

TypeScript Syntax Explanation

• Initialization:
  • This step runs once at the beginning of the loop.
  • Typically used to declare and initialize a counter variable (e.g., let i = 0).
• Condition:
  • The loop continues as long as this condition evaluates to true.
  • It is checked before each iteration.
• Increment/Decrement:
  • Updates the counter variable after each iteration.
  • Commonly increments (e.g., i++) or decrements the counter (e.g., i--).
• Code Block:
  • The block inside curly braces executes during each iteration.
  • Contains the logic to process data or perform tasks.

TypeScript for Loop Examples

Let's explore the examples of for loop below:

a) Simple TypeScript for Loop Example

Scenario: Print numbers from 1 to 5.
This example demonstrates how a basic for loop works.

1
2
3
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Explanation:

• Initialization: let i = 1 (start at 1).
• Condition: i <= 5 (loop runs while i is less than or equal to 5).
• Increment: i++ (increment i by 1 in each iteration).
• The loop prints numbers 1 through 5.

b) TypeScript for Loop Without Initialization

Scenario: Process a pre-initialized variable in a loop.
Sometimes, the counter is declared and initialized outside the loop.

1
2
3
4
let i = 1; // Counter initialized outside
for (; i <= 3; i++) {
  console.log(`Iteration: ${i}`);
}

Explanation:

• Initialization is omitted in the for loop since it’s done before.
• The loop starts directly with the condition and increment.

c) TypeScript For Loop with Arrays

Scenario: Iterate through an array of names.
This is a common use case for processing collections.

1
2
3
4
let names = ["Alice", "Bob", "Charlie"];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Explanation:

• Initialization: let i = 0 (start at the first element).
• Condition: i < names.length (loop runs until the end of the array).
• Increment: i++ (move to the next element after each iteration).
• Logs each name from the array to the console.

Best Practices for loop

1. Avoid Infinite Loops:
   • Ensure the condition allows the loop to terminate; otherwise, it will run forever and crash your program.
2. Use Meaningful Variables:
   • Name counters or loop variables descriptively for better readability (e.g., index instead of i for arrays).
3. Prefer for...of for Arrays:
   • If you’re only iterating through an array, consider using for...of for simplicity.
4. Minimize Logic Inside Loops:
   • Keep the loop body simple. If the logic is complex, use functions to make the code modular and readable.
5. Optimize Conditions:
   • Avoid recalculating values like array.length in the condition; store them in a variable instead.
6. Consider Alternatives:
   • For certain tasks, forEach or map methods might be more concise and functional.