What is Loop in JavaScript

Wondering what is a loop in JavaScript? This tutorial will help you to understand the concept of the JavaScript loop. Loops are the awesome part of any programming language. You can do multiple things in seconds without writing hundreds of lines of code.

Definition: What is a Loop in JavaScript

In JavaScript, the loop is a programming structure that repeats a block of code until a termination condition is reached.

Or

In simple words, the loop is something that we use to repeat a block of code a number of times.

For example, you want to print a student’s name 100 times in your browser. You can simply run a loop.

Whenever we think of repeating tasks, we use a loop. Because printing a student’s name 100 or 1000 times in a browser is very complicated, you can’t write 1000 lines of code for just a simple thing.

Loops are also called repetition structures in programming. The concept of a loop is the same in all programming languages.

There are 5 types of loops in JavaScript. We’ll see them in detail in our later tutorials. Let’s see how the loop works.

How does JavaScript Loop Work?

Every loop has four parts.

  1. initialization condition
  2. termination condition
  3. increment condition
  4. Code Statements to Repeat

Let’s take for loop as an example.

For Loop Syntax:

loop in JavaScript syntax
Fig: 1.1: Loop in JavaScript Syntax.

Explanation:

  1. The JavaScript for loop starts with the word for.
  2. And inside the round brackets, we use 3 statements. Initialization condition, termination condition and increment condition.
  3. The initialization statement tells JavaScript from where the loop should start. For example, we can use a variable number = 0; as a loop initializer. This means that the loop will start from 0.
  4. The termination condition is a statement that tells JavaScript on which condition the loop should stop. For example, we can use the number < 5. It means the loop will stop if the value of the number variable will be less than 5.
  5. The increment condition is crucial, it will increment the value of a variable. For example, number = number + 1 or you can simply use number++.
  6. And inside the curly braces { } we write the code statements that we want to repeat when the loop will run.

This is all. Let’s see what this loop code will look like.

What does JavaScript Loop Like?

Let’s see the code example.

In the following example, we used a for loop that will output hello world 5 times.

Explanation:

  • On the first line, we declared the variables text and number.
  • Then, we started for loop.
  • After that, we used the condition number < 5. Mean the loop will stop if the value of the number is less than 5.
  • And then, we used the arithmetic operator ++ to increment the value of the number variable. Keep in mind, that if you don’t increment the value then the loop will never end and will crash your browser.
  • Inside the curly braces, we used the code that we want to repeat. That is text = text + "Hello World " + number + "
    "; , this will execute 5 times. The code is simply adding “Hello World” to the variable text every time when the loop runs.

We used number = 0; as the initializer means it’s the starting point of the loop, at first the value of a number is 0.

Our loop will run 5 times because we used the number < 5 as a condition when the condition will be true the loop will stop. Remember it’s from 0 to 4, that is 5 times. When the value will be less than 5 which is 4 the loop will immediately stop.

That’s all.

Hope after seeing this example you will know what is a loop in JavaScript.

The above loop is an example of for loop we will further discuss that in detail in the upcoming tutorials.

If you’re new to JavaScript, you should start with the JavaScript Hello World Program.

That’s it. Now you know what is JavaScript loop.

Lastly, if you liked this tutorial then share it to help your friends. Also, you can ask questions in the comment section below.