Javascript for loop.

*Imagine writing a code to print out numbers from 1-100, this is sure going to be tiring right? With loops, this can be done without a drop of sweat.

for loop is used to iterate over a block of code a couple of times (this is usually specified). It loops through all iterables such as string, arrays and objects e.t.c. The syntax includes a for keyword, arguments enclosed in a parenthesis, and a statement block in curly braces which holds the action to be performed. The argument includes *starting point, condition, and a final expression use to update the starting point, each argument is separated by a semicolon.

By the end of this article, you will understand how to loop through iterables using for loop, use break to stop a loop, and continue to skip a particular condition. String interpolation will also be introduced.

Before we jump in, let me mention that string interpolation will be used on the code snippets and hence the need to give a refresher on what it's about.

In Javascript, strings are declared in 3 ways. Namely, using a single quote ' ', double quote " ", or back-ticks ``

String interpolation.

This is an ES6 feature that saves developers hours of debugging due to errors that could arise from string concatenation and likes.

string interpolation uses a template string along with a placeholder, The string is enclosed in a set of curly braces {}, preceded by a dollar sign $. The placeholder takes in any form of expression, be it function call, variables or arithmetics expressions. it is then evaluated at run time, and the result is inserted into the template string. The syntax is shown thus: `${expression}`

Alright, let's begin exploring what for loop is about, there are 3 different types of for loop these includes;

for loop
for of loop
for in loop

for loop.

for loop syntax goes thus: for(let i =0; i < num; i++) { console.log(i); }

for loop on Numbers.

looping through Numbers..png

for is a keyword,

let i = 0; is the starting point,

I < 6 means = condition, the code continues to run so long the condition remains true.

console.log(i) = action to be performed as the condition remains true.

The starting point variable must not necessarily be declared with an i this is just a convention that developers use, you could as well declare the variable with a, b, z, whatever suits your nerves is fine.

The code below prints out the index and value of an element iterated.

for loop on Strings.

looping through string..png So in the example above, we successfully printed out each element contained in the string and its corresponding index. You will observe an empty string at index 3, this is because javascript counts a space as a character.

Next is looping through an array

looping through Arrays.png This prints out all elements of an array and its corresponding index onto the console.

Let us look at iterating through a multidimensional array.

looping through Multi-arrays.png

In the example above the first nested array (which is at index 0 of the array) runs, then its content also runs and now checks if initialize counter which is now 1 is less than the condition, if true, the loop moves on to the next nested array and the loop goes on in that order until the condition becomes false.

for of loop.

This is yet another ES6 feature that is used to loop through iterables such as strings, arrays, maps, sets, and other array-like objects such as Arguments or Nodelist. for of loop usually returns the values of the variable looping through.

for of loop syntax for(let i of num) { console.log(i); }

for of loop on String:

for of on string.png

for of loop on array:

for of on Array.png

As stated earlier, the for of loop returns only the values without its index. To access the index of an iterable we use an array method called, entries(), Array.entries() returns a key/value pair where array index is the key and array element is its value.

see an example below...

for of on Array key_value.png

Note that array destructuring is used in the example above. You may as well check out array destructuring with this link: Array destructuring.

for in loop.

This is used to iterate through the properties of an object and allows access to each key/value pair. for in loop may not always iterate elements in order and thus could be avoided in cases where elements are required to be returned orderly.

for in loop syntax for(let obj in object) { console.log(obj); }

let see for in loop in action;

example 1 returns the property of an object.

for in loop on object.png

example 2 returns the values.

for in loop on object (1).png

example 3 returns both key/value pairs.

for in loop for object key_value.png

BREAK AND CONTINUE.

There are cases where you may want to stop the iteration even before the stated condition becomes false. In this case, the keyword break is applied.

let's check with an example for better understanding.

break .png

From the example above, it is seen that the length of the array is 5, but an additional condition has been applied which says the iteration should stop at the index of 2. As a result of this, the loop breaks without iterating through the remaining elements of the array.

Another useful keyword is continue which is the opposite of the keyword break as it skips a particular condition stated on the loop.

See an example below.

As shown above, the same example is used to clearly show the difference between break and continue. The continue keyword skips the loop at the stated condition and moves to the next element, while break stops the loop entirely at the stated condition.

Note that for continue to work effectively it should come before printing out the values, hence it will run the loop before the statement is applied.

Please don’t forget to drop a comment or correction and help share.............

Thank you.

qeescode