Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
`for` loop with arrays | Loops
Introduction to TypeScript
course content

Contenido del Curso

Introduction to TypeScript

Introduction to TypeScript

1. TypeScript Fundamentals
2. Conditional Statements
3. Arrays
4. Loops
5. Functions

book
`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:
12345
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]}`) }
copy

Let's break down what's happening in the code above:

  1. We create an array of type number with 10 elements;
  2. Our goal is to inspect each element of the array and find which index it is located;
  3. 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;
  4. Knowing that i is the index of the element, we retrieve the array elements and display them on the screen using array[i];;
  5. 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:

12345
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]}`) }
copy

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).

12345
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]}`) }
copy

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:

123456789
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]") } }
copy

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.

What is the purpose of a `for` loop when working with arrays in TypeScript?

What is the purpose of a for loop when working with arrays in TypeScript?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6
We're sorry to hear that something went wrong. What happened?
some-alt