Friday , 17 November 2017
Home / Programming / JavaScript / For Loop – JavaScript Tutorial
For Loop
For Loop

For Loop – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Loops are essential to know in JavaScript programming. Loops allow you to run the same block of code until it is broken. You could use a function and just call it again and again to run the same block of code, but a loop doesn’t need to be called to run continuously and you can manipulate how many times you want it to run.

There are 4 kinds of loops. In this tutorial, we’ll be talking about the for loop. The for loop is very simple and effective to use.

Creating A For Loop

Clear your script and update your code to this.

A for loop is easy to create. You first use the keyword for to tell JavaScript you want to create a for loop. Then, a loop is made out of 4 parts. Each part is important. Let’s take a look at each one and what they do.

The first part is the initializer. The initializer gives you the opportunity to create a variable. The variable created here is usually the starting point for your loop. You’ll see what I mean in a moment.

The next part is the condition. To prevent your loop from running forever, this condition must be true in order for the loop to continue running. The rules that apply to the conditions in if-else statements apply here.

The third part is the increment or decrement. We’ll discuss this part in more detail a little later in this tutorial. The final part is the code that you want executed each time this loop runs. The first 3 parts are separated by semi-colons and are typed inside the parenthesis.

If you take a look at our for loop, notice that initializer is a variable called i with the value of 0. Usually your initializer will start at 0 or a number that goes down. Our condition is i < 10. i is equal to 0 so this will return true because 0 is always less than 10.

Our loop will run endlessly because our condition is always true. In order to change this, we use our increment to increase the value of i. We never discussed what increments and decrements are.

Increments & Decrements

By incrementing a value, you’re adding 1 to it. A shortcut to do this is the use the increment operator which is two plus signs ( ++ ). To decrement a value, you use 2 minus signs ( ).

Our for loop runs the code inside the curly brackets. Here are a couple of things you should know about for loops.

  • The initializer only runs once and is the first thing to run.
  • Even though the increment/decrement part is coded before the block of code, it actually runs last.
  • The order in which a loop runs is initializer, condition, block of code, increment, condition, block of code, increment, condition, etc…

The increment allows us to move i up once so our condition eventually returns false and the loop stops running. Inside our loop, the total has 10 added to it’s original value. We then alert the final value of total in our script. You should get 100. You should know that code after our loop won’t run until the loop is completely finished running.


For Loops are easy to construct. You shouldn’t allow your loops to run endlessly or else you’ll end up freezing your browser. We’ll be creating for loops in future tutorials.

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!