In TypeScript, we can use the for-loops to iterate through the iterable objects such as array, map, set, string, arguments object
and so on. This article explores the TypeScript for-loop, and its syntax, providing code examples, and explaining its various components.
TypeScript supports 3 types of for-loops:
- Traditional
for
loop: To get precise control over iterations. for..of
loop: To iterate over iterable objects such as an array, set, map, or values.for..in
loop: To iterate over object properties
1. Exploring For-Loops in TypeScript
for
‘ Loop
1.1. The Traditional ‘The traditional for
loop is the most familiar looping construct that is available in most programming languages. It’s characterized by its initialization, condition, and increment (or decrement) parts.
Traditional for loop executes a block of code until a specified condition is true
. After each iteration, a statement (increment/decrement) is executed, which increments or decrements the counter used in the condition.
for..of
‘ Loop
1.2. The ‘Introduced in ECMAScript 2015 (ES6), the for..of
loop simplifies iterating over iterable objects like arrays, strings, maps, and sets. With the help of ‘for..of
‘ loop, we do not need to manage a counter variable explicitly.
In the following example, the for..of
loop iterates over each element of the colors
array, allowing direct access to the values without managing indices.
for..in
‘ Loop
1.3. The ‘The for..in
loop is used to iterate over the properties of an object. It’s generally not recommended for iterating over arrays due to potential issues described later in this article.
In the following example, we are iterating over the properties of the person object.
The program output:
2. For Loop Examples
Let us see a few examples of iterating over different types of collections and objects in TypeScript.
for..of
‘ Loop to Iterate through an Array
2.1. Using ‘Example of using ‘for..of
‘ loop to iterate over elements of the array.
for..of
‘ Loop to Iterate through Map Entries
2.2. Using ‘Example of using 'for...of'
to iterate over Map entries.
for..of
‘ Loop to Iterate through a Set
2.3. Using ‘Example of using 'for...of'
to iterate over Set elements.
for..of
‘ to Iterate through a String
2.4. Using ‘Example of using 'for...of'
to iterate over string
. During iteration, we will get one single character from string
in each loop cycle.
for..in
‘ loop to iterate through an array
3. Do not use ‘The for..in
loop in JavaScript and TypeScript is designed to iterate over the properties of an object. While it might seem tempting to use it for arrays, there are potential issues that can arise.
For example, consider the following example of colors array. When we iterate over its elements, everything seems normal.
The program output:
The output seems correct. However, let’s see what happens when we introduce an additional property to the array’s prototype:
The program output:
Notice the above output. It prints the additional property added to the Array.prototype object also because the for..in
loop iterates over all enumerable properties of an object, including those inherited from its prototype chain.
In real-life applications, this behavior can lead to unintended consequences when working with arrays.
4. Conclusion
The following table summarizes the important points related to all 3 variants of for-loop in TypeScript.
Feature | Traditional for Loop | for..of Loop | for..in Loop |
---|---|---|---|
When to use | Precise control over iterations | Iterate over iterable objects | Iterate over object properties |
Syntax | for (initialization; condition; increment/decrement) { … } | for (variable of iterable) { … } | for (property in object) { … } |
Iterates over | Indices (often used with arrays) | Collections and Values (elements) | Properties of an object |
Access to Index | Yes | No | No |
Prototype Properties | Not an issue | Not an issue | Can include unexpected properties |
Performance | Generally performs well | Generally performs well | Potentially slower |
Break Statement | Yes | Yes | Yes |
Continue Statement | Yes | Yes | Yes |
Drop me your questions in the comments section.
Happy Learning !!
Comments