Lesson 1

Mastering Iterations: Loops in TypeScript

Introduction and Overview

Welcome to our exploration of TypeScript's loop structures — important constructs for automating repetitive operations. We will be delving into the intricacies of the For Loop, For-In Loop, and For-Of Loop. Let's begin!

Introduction to TypeScript 'For' Loops

Much like replaying your favorite track, loops are employed to execute tasks repetitively. Here's a straightforward for loop that prints numbers from 1 to 5:

TypeScript
1for (let i = 1; i <= 5; i++) { 2 console.log(i); // Will print numbers from 1 to 5 3} 4/* 5Prints: 61 72 83 94 105 11*/

Our for loop begins by initializing i as 1, sets the condition i <= 5, and increments i by 1 in each iteration using i++. Consequently, i moves from 1 to 5, wherein each round prints the current value of i.

Note: i++ is an increment operation that augments the value of i by 1. It is essentially equivalent to i = i + 1 or i += 1, but in a more concise format.

Deep Dive into 'For' Loop

Let's revisit our example:

TypeScript
1for (let i = 1; i <= 5; i++) { 2 console.log(i); // Will print numbers from 1 to 5 3}

The For Loop consists of three components:

  • Initialization: Here, i begins with a value of 1.
  • Condition: The loop continues as long as i <= 5 holds true.
  • Changes: In this case, i++ advances i by 1 with each succeeding loop iteration.
    • The changes can vary as per the requirements; we could also decrement i by 1 if the scenario warrants.

The generalized structure of the loop remains fixed:

TypeScript
1for ([initialization]; [condition]; [changes]) { 2 [loop body] 3}

As an example, consider this snippet that lists all seven days of the week:

TypeScript
1let days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; 2for (let i = 0; i < days.length; i++) { // 'i' traverses all indices in 'days' 3 console.log(days[i]); // Prints each day of the week 4} 5/* 6Prints: 7Monday 8Tuesday 9Wednesday 10Thursday 11Friday 12Saturday 13Sunday 14*/
Exploring 'For-In' Loop

The for-in loop iterates over the properties of an object, almost as though checking the contents of a bag:

TypeScript
1let star = { 2 name: "Proxima Centauri", 3 color: "Red", 4 size: "Dwarf", 5}; 6for (let feature in star) { 7 console.log(feature, '->', star[feature]); 8} 9/* 10Prints: 11name -> Proxima Centauri 12color -> Red 13size -> Dwarf 14*/

In this case, feature sifts through each property of the star object, and star[feature] retrieves the value for each attribute.

Discovering 'For-Of' Loop

The for-of loop operates on iterable elements like arrays. Consider a list of planets:

TypeScript
1let planets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']; 2for (let planet of planets) { // iterate through every planet in the list 3 console.log(planet); // Prints each planet 4} 5/* 6Prints: 7Mercury 8Venus 9Earth 10Mars 11Jupiter 12Saturn 13Uranus 14Neptune 15*/

In this example, planet traverses each element in planets, printing each planet. Notice that indices aren't required when using for-of as you iterate over the elements themselves.

Lesson Review and Further Practice

Bravo! You've adeptly navigated through TypeScript's for, for-in, and for-of loops. These fundamental pillars will help you write clean and efficient codes.

Next up, we'll fine-tune these skills through practical exercises. Practice is key to cementing and integrating your newfound knowledge. Best of luck!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.