Course Content
Introduction to TypeScript
Introduction to TypeScript
`for` loop with arrays
Proper array manipulation begins with loops!
You already know what arrays are, and that indexing in them starts from zero. You also know that in a for loop, we can assign any value to the variable i
. For example, zero! But what if it's convenient for us to use a for loop together with an array? Let's think about it:
- If we need to retrieve an element from the array, we use
array[index];
; - We have the variable
i
, which effectively replaces our index; - Combining the two points above, we can conclude that we can use the
array[i]
syntax inside a for loop to work with an array quickly. Let's look at an example:
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0]; for (let i: number = 0; i < 10; i++) { console.log(`The ${i} element in the array is ${array[i]}`) }
Let's break down what's happening in the code above:
- We create an array of type
number
with 10 elements; - Our goal is to inspect each element of the array and find which index it is located;
- Since indexing in the array starts from 0, our variable
i
initially has a value of 0. We also set the limit equal to the length of the array, which is 10; - Knowing that
i
is the index of the element, we retrieve the array elements and display them on the screen usingarray[i];
; - Since
i
is the index of the element in the array, we immediately show with which index a particular element is located.
This way, we can interact with the array. Let's set ourselves a different task: retrieving each element located at an even index in this array:
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0]; for (let i: number = 0; i < 10; i+=2) { console.log(`The ${i} element in the array is ${array[i]}`) }
By using i+=2
, which is equivalent to i = i + 2
, we retrieve every element in the array that is located at an even index. In other words, the index of the element should be divisible by 2. Such indices are 0, 2, 4, 6, and so on. Note also that with i
, we can display the index of the element, as we did in the example above.
By the way, we don't need to manually count the size of the array! We can use the array property array.length
. Let's take a look at an example, and at the same time, see how to iterate through the array from the end to the beginning (in case you need to traverse the array in reverse order).
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0]; for (let i: number = array.length - 1; i >= 0; i--) { console.log(`The ${i} element in the array is ${array[i]}`) }
In the example above, we initialized i
as array.length - 1
because array.length
is 10, and the last element of the array has an index of 9
. Blame it all on zero-based indexing.
Additionally, you can use array.length
not only for initialization but also within the condition. There are many different examples you can come up with for all of this; all you need is a bit of imagination and specific use cases. For example:
let array: number[] = [2, 4, 6, 1, 7, 1, 4, 77, 23, 0]; for (let i: number = 0; i < array.length; i++) { if ((array.length - i) % 2 == 0) { console.log(`The ${i} element in the array is ${array[i]}`) } else { console.log("[DELETED DATA]") } }
If the value of the array length minus the index is divisible by 2, we display that element. Otherwise, we display 'DELETED DATA
' - that's the boss's orders.
Thanks for your feedback!