Mastering Loops with TypeScript

Introduction

Greetings, Explorer! In this lesson, we will delve into the essential tools of programming loops . Loops simplify and enhance the efficiency of repetitive tasks — much like a coffee maker brewing multiple cups with a single press, they automate processes to ensure consistent outcomes. We will explore the universe of looping using TypeScript and gain hands-on experience by applying loops to arrays and strings.

Understanding Looping

Imagine listening to your favorite song on repeat. That's the concept of loops in programming. For instance, we can use a for loop to print greetings for a group of friends. TypeScript let friends: string[] = ["Alice", "Bob", "Charlie", "Daniel"]; for (let i: number = 0; i < friends.length; i++) {// `i` is the index that changes with each iteration // For each friend, print the greeting console.log(`Hello, ${friends[i]}! Nice to meet you.`);} // Output: // Hello, Alice! Nice to meet you. // Hello, Bob! Nice to meet you. // Hello, Charlie! Nice to meet you. // Hello, Daniel! Nice to meet you. let friends: string[] = ["Alice", "Bob", "Charlie", "Daniel"]; for (let i: number = 0; i < friends.length; i++) {// `i` is the index that changes with each iteration // For each friend, print the greeting console.log(`Hello, ${friends[i]}! Nice to meet you.`);} // Output: // Hello, Alice! Nice to meet you. // Hello, Bob! Nice to meet you. // Hello, Charlie! Nice to meet you. // Hello, Daniel! Nice to meet you. Loops allow us to execute repetitive sequences automatically and efficiently.

For Loop in TypeScript

The for loop is a control flow statement that allows code to be executed repeatedly. The structure of a for loop is typically for (initialization; condition; iteration) { loop body } . In TypeScript, type annotations ensure that variables are used correctly, enhancing our programming experience. Initialization : This sets up the loop variable and includes type annotations. It's executed once when the loop begins. Condition : A Boolean expression determines if the loop will continue or stop. If true, the loop continues; if false, it ends, and the flow jumps to the next statement after the loop block. Iteration : This updates the loop variable. This executes after the loop body and right before the next condition check. Loop Body : The block of code that executes in each loop. Let's print a range of numbers using a for loop: TypeScript for (let num: number = 0; num < 5; num++) {console.log(num);} // Output: // 0 // 1 // 2 // 3 // 4 for (let num: number = 0; num < 5; num++) {console.log(num);} // Output: // 0 // 1 // 2 // 3 // 4 In each cycle, the variable num is updated after executing the code inside the block.

Enhanced For Loop in TypeScript: "for...of"

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

let friends: string[] = ["Alice", "Bob", "Charlie", "Daniel"];

for (let i: number = 0; i < friends.length; i++) {
    // `i` is the index that changes with each iteration
    // For each friend, print the greeting
    console.log(`Hello, ${friends[i]}! Nice to meet you.`);
}

// Output:
// Hello, Alice! Nice to meet you.
// Hello, Bob! Nice to meet you.
// Hello, Charlie! Nice to meet you.
// Hello, Daniel! Nice to meet you.

TypeScript

for (let num: number = 0; num < 5; num++) {
    console.log(num);
}

// Output:
// 0
// 1
// 2
// 3
// 4

TypeScript

let fruits: string[] = ["apple", "banana", "cherry"];

// `fruit` stands for each fruit in the `fruits` array
for (let fruit of fruits) {
    console.log(fruit);
}

// Output:
// apple
// banana
// cherry

let fruits: string[] = ["apple", "banana", "cherry"];

// `fruit` stands for each fruit in the `fruits` array
for (let fruit of fruits) {
    console.log(fruit);
}

// Output:
// apple
// banana
// cherry

TypeScript

let word: string = "hello";
// `ch` is each individual character in `word`
for (let ch of word) {
    console.log(ch);
}

// Output:
// h
// e
// l
// l
// o

let word: string = "hello";
// `ch` is each individual character in `word`
for (let ch of word) {
    console.log(ch);
}

// Output:
// h
// e
// l
// l
// o

TypeScript

let fruits: string[] = ["apple", "banana", "cherry"];

// Using `for...of` to get values directly
for (let fruit of fruits) {
    console.log(fruit); // Output: apple, banana, cherry
}

// Using `for...in` to get indices
for (let index in fruits) {
    console.log(index); // Output: 0, 1, 2
}

let fruits: string[] = ["apple", "banana", "cherry"];

// Using `for...of` to get values directly
for (let fruit of fruits) {
    console.log(fruit); // Output: apple, banana, cherry
}

// Using `for...in` to get indices
for (let index in fruits) {
    console.log(index); // Output: 0, 1, 2
}

TypeScript

let colors: string[] = ["red", "green", "blue"];

// Using `forEach` to process each color
colors.forEach((color) => {
    console.log(color);
});

// Output:
// red
// green
// blue

let colors: string[] = ["red", "green", "blue"];

// Using `forEach` to process each color
colors.forEach((color) => {
    console.log(color);
});

// Output:
// red
// green
// blue

TypeScript

let num: number = 0;
// The loop keeps running until `num` is no longer less than 5
while (num < 5) {
    console.log(num);
    // Increase `num` by 1 at the end of each iteration
    num++;
}

// Output:
// 0
// 1
// 2
// 3
// 4

let num: number = 0;
// The loop keeps running until `num` is no longer less than 5
while (num < 5) {
    console.log(num);
    // Increase `num` by 1 at the end of each iteration
    num++;
}

// Output:
// 0
// 1
// 2
// 3
// 4

TypeScript

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

let total: number = 0;
// `num` is each number in `numbers`
for (let num of numbers) {
    total += num; // Add each number in the array
}
console.log(total); // print the total sum

// Output:
// 15

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

let total: number = 0;
// `num` is each number in `numbers`
for (let num of numbers) {
    total += num; // Add each number in the array
}
console.log(total); // print the total sum

// Output:
// 15

TypeScript

let text: string = "hello";
let vowelCount: number = 0;
// `ch` is each character in `text`
for (let ch of text) {
    // If a vowel letter is found, increment the count
    if (ch === 'a' || ch === 'e' || ch === 'i' || ch === 'o' || ch === 'u') {
        vowelCount++;
    }
}
console.log(vowelCount); // print the count of vowels

// Output:
// 2

let text: string = "hello";
let vowelCount: number = 0;
// `ch` is each character in `text`
for (let ch of text) {
    // If a vowel letter is found, increment the count
    if (ch === 'a' || ch === 'e' || ch === 'i' || ch === 'o' || ch === 'u') {
        vowelCount++;
    }
}
console.log(vowelCount); // print the count of vowels

// Output:
// 2

TypeScript

let fruits: string[] = ["apple", "banana", "cherry"];

// `fruit` stands for each fruit in the `fruits` array
for (let fruit of fruits) {
    console.log(fruit);
}

// Output:
// apple
// banana
// cherry

TypeScript

let word: string = "hello";
// `ch` is each individual character in `word`
for (let ch of word) {
    console.log(ch);
}

// Output:
// h
// e
// l
// l
// o

TypeScript

let fruits: string[] = ["apple", "banana", "cherry"];

// Using `for...of` to get values directly
for (let fruit of fruits) {
    console.log(fruit); // Output: apple, banana, cherry
}

// Using `for...in` to get indices
for (let index in fruits) {
    console.log(index); // Output: 0, 1, 2
}

TypeScript

let colors: string[] = ["red", "green", "blue"];

// Using `forEach` to process each color
colors.forEach((color) => {
    console.log(color);
});

// Output:
// red
// green
// blue

TypeScript

let num: number = 0;
// The loop keeps running until `num` is no longer less than 5
while (num < 5) {
    console.log(num);
    // Increase `num` by 1 at the end of each iteration
    num++;
}

// Output:
// 0
// 1
// 2
// 3
// 4

TypeScript

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

let total: number = 0;
// `num` is each number in `numbers`
for (let num of numbers) {
    total += num; // Add each number in the array
}
console.log(total); // print the total sum

// Output:
// 15

TypeScript

let text: string = "hello";
let vowelCount: number = 0;
// `ch` is each character in `text`
for (let ch of text) {
    // If a vowel letter is found, increment the count
    if (ch === 'a' || ch === 'e' || ch === 'i' || ch === 'o' || ch === 'u') {
        vowelCount++;
    }
}
console.log(vowelCount); // print the count of vowels

// Output:
// 2

Introduction

Understanding Looping

For Loop in TypeScript

Enhanced For Loop in TypeScript: "for...of"

Join the 1M+ learners on CodeSignal

Understanding "for...in" Loop

The "forEach" Method in TypeScript

Differences Between "for", "for...of", "for...in" and "forEach" Loops

While Loop in TypeScript

Applications of Looping

Summary