“for loop”. Learn how you can use it.

In JavaScript, as in other languages, we can work with diverse types of repetition structures. It is an important feature to make easy-to-execute loops. It means that when one command, has to repeat many times while on condition been true, or on stop command call, we can use this type of structure, on this post, we will talk about “for loop”.

Content:

What is, and how work for loop?
How is the syntax to for loop on JavaScript?
How do we use this loop in real life?
The differences between for/in and for/of?
Conclusion.

What is, and how work for loop?

First of all, let's understand what repetition structure means. Imagine that you have to show on the console some numbers from one to ten. Without any repetition structure, you had to write a command for each number. It is not productive, right? Imagine thousands of numbers.

JavaScript offers functions that repeat a command or a group of instructions “x” times, making the developers' lives easier.

It is important to remember that for loop isn't alone in the repetition structures. We have another like the while, forEach, do..while for example.

In general, for loop is used to add or take values to one index. That's why it is very applied to run on arrays.

For loop, set one action, depending on one initial condition, and execute it in loops until it changes and stops the loop. It will be more evident when we show some examples.

How is the syntax to for loop on JavaScript?

The loop For has tree-specific expressions followed to the code block executed while the condition is true.

The expressions have to be separated by a semi-colon.

Following the syntax:

for ( <initial expression>; <conditional expression>; <initial expression update> ) {
// code block declaration
}

initial expression: It is a variable declaration or initial value updated. It is important to know that can be an expression to initialize one variable;
conditional expression: It is a test expression to check if the condition is true or not, to after check, execute the code block or get out of the loop structure.
initial expression update: It is an update of the variable used on the initial expression;
declaration: It is a specific instruction or a sequence of instructions to execute some action.

How do we use this loop in real life?

The best way to understand how the for loop works is by showing some examples.

Let's create a loot to show on console numbers from 1 to 10. Following the code:

for (let i=1; i<=10; i++) {
console.log(i);
}
/*
Output:
1
2
3
4
5
6
7
8
9
10
*/

Please take a look at the initial expression. It is declared a variable called i then was initiated with value = 1.

The conditional expression checks if the i value was bigger than 10 to keep the expression true, update the initial expression, and keep running the loop.

The code block on the braces will execute while the conditional expression is true. In the example, the expression console.log(i) works, showing the i value every time the looping happens.

The differences between for/in and for/of?

Have another way to use a for loop, with a different syntax as well. With simple examples, we will show loops for/in and for/of.

The for/in is used to access the property of an object.

const cars = {model: "A3 Sedan", brand: "Audi", year: 2020}
for (let details in cars) {
  // show details of cars object
  console.log(`${details} : ${cars[details]}`)
}
/*
Output:
model: A3 Sedan
brand: Audi
year: 2020
*/

The variable used in this example is an object, and each detail in a car's object is one property. In this case, the for/in loop calls to details inside the car's object.

The object has an index and the values for each index. In our example, the indexes are model, brand and year. The elements in this object will expose the name of properties. The content is stored for each one on the console.

It is essential to know that for/in can work on arrays, but it returns the array index value and not the property content.

One way to work with arrays is using the for/of structure. To understand the difference, take a look at the following example. It will be read letters on one array. First, let's use the for/in:

const letters = ['a', 'b', 'c'];
for (let i in letters) {
    console.log(i);
}
/*
output:
0
1
2
*/

You can see that this code brings only the array index. Now let's see the for/of loop where you can see the result stored on each index.

const letters = ['a', 'b', 'c'];
for (let i of letters) {
    console.log(i);
}
/*
output:
a
b
c
*/

Conclusion.

As you can see in this post, JavaScript has fell ways of for repetition structure, and it is essential to know about each of them.

This knowledge is essential to developing applications that use the right tools with good code practices.

Thank you for reading.

FL4V.IO