Javascript for() {} Loop - Simplified
Tags: javascript, webdev, forloop, loop
Published: 2019-08-26 13:23:39

The `for loop` creates a loop where executions are executed as long as the given condition remains true.

There are other methods of loops which [you can find here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration).
I chose to explain the for-loop because it pretty much describes how a loop operation is carried out. There are complex implementations of a for-loop though.


### `for loop`
The syntax is 
```javascript
for(initialization; condition; final-expression) {
   // statement
}
```
The arguments are separated by a `semi-colon`.
The `initialization` is an expression or variable that is evaluated before the loop begins. Usually, it is used as a counter variable.
The `condition` is an expression that is evaluated before each iteration. Iterations are only carried out as long as the condition remains true, i.e the expression evaluates to true.
The `final-expression` is the last expression to be carried out before the next iteration.
The `statements` are to be evaluated as long as the condition remains true.

A simple typical example of this is;
````javascript
function example() {
    let a = 3;
    let sum = 0;
    for(let i = 0; i < a; i++) {
        sum += 1;
    }
    return sum;
}
example();
//expected output - 3
```

### Let's analyze this program, shall we? 😃

I placed the for loop in a function so that the codes there are only executed when the function is called - the `example` function.

What our program (or rather, the function) simply does is to set the variable `a` to 5 and `sum` to 0. It also contains a for loop operation.
The `for...loop` operation `initializes` a variable `i` to 0, states a `condition` that the statements of the loop should only be executed while the `i` variable is less than the `a` variable, states a `final-expression` that after each operation, increase the `i` variable by 1 (`i++`) and also leaves a statement to be executed which is incrementing the sum by 1.

While `i` is less than `a`, the sum keeps increasing by 1.

_First Iteration_

Variable `i` is initialized to 0.
( Is `i` less than `a` ? )
( Yes it is 😊, `0` is less than `3`, therefore, the condition returns `true` )
`sum += 1` implies `sum = sum + 1`. `sum` is therefore `= 0 + 1`.
`sum = 1`
According to the `final-expression`, variable `i` is incremented by 1. `i` now becomes `0 + 1 = 1`

_Second Iteration_

( `i` is 1 now )
( Yes it is 😊, `1` is less than `3`, therefore, the condition returns `true` )
`sum+=1` - `sum = 2`
`i++` - `i = 2`

_Third Iteration_ 

( `i` is 2 now )
( Yes it is 😊, `2` is less than `3`, therefore, the condition returns `true` )
`sum+=1` - `sum = 3`
`i++` - `i = 3`

_Fourth Iteration_

( `i` is 3 now )
( No it isn't ☹️, `3` is not less than `3`, it is rather, equal to 3, therefore, the condition returns `false` )
( As a result, our loop doesn't carry out any operations again and our final-expression is never executed also )

Our function then returns the value of `sum` which is 3.

`for...loop` can be implemented in many other scenarios too.
e.g looping through an array, through objects, executing a function while a condition is true.

#### Let's try to loop through an array 🤗
Our aim here is to log the elements of an array to the console.
```javascript
let x = ['Dillion', 45, 'Megida'];
console.log(x);
// expected output - ["Dillion", 45, "Megida"]

let currentElement;
// But we need the elements instead 🤔
for(let arrIndex = 0; arrIndex < x.length; arrIndex++) {
    currentElement = x[arrIndex];
    console.log(currentElement);
}

// At console, we have
// Dillion
// 45
// Megida
```

### Analysis 🙂
We have our array attached to the variable `x`.
And we can see the results of logging `x` to the console.
But, our aim was to get the individual elements.
So we decided to loop through the array and further carry out some statements.

A `currentElement` variable was declared which would determine the current element of the array we are on.

Every element of an array possesses an index as we all know, and the index starts from 0 which is possessed by the first element.

An `arrIndex` was declared and initialized to 0.
The condition given is that `arrIndex` should always be lesser than the length of our array since the index of the last element is `length of array - 1`.
And a final-expression is given to at the end of every iteration, increment the `arrIndex` variable by 1.

_First Iteration_

`arrIndex` initialized to 0.
( is `arrIndex` < `x.length` ? )
( yes it is, 0 is < 3, condition returns true)
`currentElement` is evaluated to the element at the current index of the array, which is `Dillion`.
`Dillion` is logged to console.
`arrIndex` is incremented by 1. `arrIndex` is now 1.

_Second Iteration_
`arrIndex` is now 1.
( is `arrIndex` < `x.length` ? )
( yes it is, 1 is < 3, condition returns true)
`currentElement` is now `45`
`45` is logged to console.
`arrIndex` is now 2.

_Third Iteration_
`arrIndex` is now 2.
( is `arrIndex` < `x.length` ? )
( yes it is, 2 is < 3, condition returns true)
`currentElement` is now `Megida`
`Megida` is logged to console.
`arrIndex` is now 3.

_Fourth Iteration_
`arrIndex` is now 3.
( is `arrIndex` < `x.length` ? )
( No it isn't, 3 is = 3, condition returns false)
`currentElement` is not evaluated.
Nothing is logged to console.
`arrIndex` is never evaluated.

So there you have it, all elements logged to console 🎉

As I said, there are many other implementations of for loops.


I hope you have gotten a better understanding of loops and also, for loops.

Helpful Article - [for statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)

Thanks for reading. 😀

Kindly comment your reviews