DEV Community

Nduduzo
Nduduzo

Posted on • Originally published at dvspc.wordpress.com on

Looping In Javascript

Loops in programming are pretty useful, its a way of automating a task or function thus saving you time (writing less code). I’ve heard that loops are almost identical in most languages but my experience so far is with Javascript so I’ll talk about loops specifically in Javascript. 🙂

Okay so there’s basically 4 common types of loops:

  • For loop
  • For Each loop
  • While loop
  • Do While loop

In the spirit of this blog not being too long, I’m gonna explain (with examples) only two of the four loops mentioned above, maybe I’ll do a second part where I explain the rest… 🙂

the For loop

const x = 10;
for(let i = 0; i < x; i++){
    console.log(i)
}
Enter fullscreen mode Exit fullscreen mode

Here’s what the code above is doing: first a variable _ x _ is declared and assigned the number _ 10 _ (therefore x = 10). Then a local variable i is declared and assigned the number _ 0 _ (therefore i = 0). Now for as long as _ i _ is less than _ x _ add 1 to the variable _ i _ and return the current value of i. This is basically counting from 0 to 9. Now you may be confused by this a bit because x = 10 so why isn’t the program counting to 10?

Here’s why:

const x = 10;
for(let i = 0; i <= x; i++){
    console.log(i)
}
Enter fullscreen mode Exit fullscreen mode

The previous example counted 0 to 9 because of one reason, the condition (i < x), this tells the program as long as i is less than x, so it will stop running once it gets to 9 because if it continues the condition will no longer be true (if i = 10 then i < x is false). Now consider the example above, you’ll notice that the condition has now changed from i < x to i <= x. This will now count from 0 to 10 because of the equal sign. That’s a for loop.

the For Each loop

const [a, b, c] = ['first letter', 'second letter', 'third letter'];

let [...letters] = [a, b, c];

letters.forEach(letter => {
   console.log(letter);
})
Enter fullscreen mode Exit fullscreen mode

Variables a b c are declared and assigned first letter, second letter, third letter accordingly. Then they are collected into one variable letters , notice I said “collected”… that’s because letters is actually an Array containing 3 variables a, b, c. Now ForEach of those letters return an individual letter’s value. If you run this code it will output a list like this:

  • first letter
  • second letter
  • third letter

and then stop running. That’s a ForEach loop.

There’s also something called an Infinite loop, this is when a program keeps performing a defined task an infinite amount of times. Here’s an example:

const x = 2;
for(let i = 3; i > x; i++){
   console.log(i)
}
Enter fullscreen mode Exit fullscreen mode

DO NOT run this code, 😵 ☠ it will crash your browser (and may crash your PC altogether depending on your specs). Variable _ x _ equals 2 , variable i equals 3 then i has to keep adding 1 as long as _ i _ is more than _ x _. (this condition will forever evaluate to true, therefore the loop won’t stop running, thus resulting an infinite loop ).

Like I said in the intro, I don’t want this blog to be long so I’ll end it here.

Alright cool. ✌

Top comments (0)