Loops in JavaScript - ProgrammerTech


Loops in JavaScript

  • Share this:
Loops in JavaScript

Loops JavaScript

We use loops in programming in general to make it easier for us not to write the same code multiple times. Repeat commands are used to repeat a specific command or print a set of data once. If we want to print the sentence "Programmer Tech" a thousand times, is it reasonable to write a thousand lines to print this sentence a thousand times? When we want to print an amount of data or information and need to show it in several lines, we will use the repeat commands.


for loop in javascript

A for loop is a condition used to repeat something multiple times and usually contains a final value.

The general form of a for loop in JavaScript

for(start counter){
	/Commands we want to repeat

Within these brackets {} we write the JavaScript commands that we want to repeat, and between these brackets () we write inside the variable and the value from where the count starts, and the repetition commands and at the end we put the ++ variable.

Example 1

Type the word Programmer Tech ten times in JavaScript.

We create an id in the html file and call it while-loop and it is in the address tag h5.

<h5 id="while-loop"></h5>

In the javascript file, write the code

for (var count = 0; count <= 10; ++count){
    document.getElementById("while-loop").innerHTML+="Programmer: " + count + "<br>";

We created a for loop and the counter starts from zero and set a condition that as long as the counter is less than or equal to 10, stay within the loop and add 1 in each cycle. Then we fetched the data and displayed it via the id from the html file, which is to print the word “Programmer” and then go down a new line. Until it reaches the number 10, the repetition stops.


Example 2

Let's imagine that we work in a company with 1500 employees, and each employee in it has several qualities, for example 10 or more qualities, we will use the lobe for this because it is much easier than the matrix.

var id2 = ["name : data ", "age : 26", "country : sudan"]
for(var count = 0;count<id2.length; count++){
    document.getElementById("while-test").innerHTML +=id2 [count] + "<br>";

We have a numerical array called id2, which holds the data of one of the employees in this company and contains the name, age and country. Then we created an iterative for loop and told him the start of the counter is 0 and if the length of the counter is less than id2 and incremented by one per cycle. And we displayed the data by linking it to the id in the html file.


while loop in JavaScript

The while loop in JavaScript is an iteration command, which is very simple and beautiful.

The general form of a while loop in JavaScript

var count = 0;
while(correct condition){

In the place of the number 0 we put the number from which we want to start counting, and within these brackets () the condition must be true for the code to work, and within the curly brackets {} we write the commands we want to repeat.

Example 3

We go to the html file and put the id of the element and the hands is while-loop.

var count = 1;
while(count "<= "10"){
    document.getElementById("while-loop").innerHTML+="Programmer: "+count + "<br>";

We set += to group the previous value and the new value together to avoid deleting the previous value. And we set the br tag to go down a new line, and we put count++ at the end to increment 1 in each cycle and stop when the count is finished. We have to write count++ at the end for the site to work because if we don't put it then the site won't work it stays in update mode. And count is the name of the variable we used in our example so you don't consider it a constant or a reserved word.


do while loop in JavaScript

Do While Loop JavaScript we use if we want the code to be executed multiple times but we don't know how many times in the selection because we want to stop the execution if a certain condition is met.

Example 4

var count = 0;
do {
    document.getElementById("while-test").innerHTML += "ID: "+count + "<br>";

We created a variable and set the number 0, which is the start of the count loop, and the iteration condition is less than or equal to 10. We display the data with html and put the <br> element at the end to drop a line in each count. And we set ++count to not complete counting to infinity. In the case of inverting the smaller sign by the larger sign in the previous example, only ID:1 will be printed for us.

The condition must be true for while loop and for loop to run, while in do while loop it is used for testing only once.


Control statements with loops in javascript

Control statements are used to control the flow of loops, as well as with the switch clause. There are two types of control statements in loops:

  • Break Statement.
  • Continue Statement.


break clause in javascript

The break clause is to stop recurring when one or more conditions are met. When executed, the loop is stopped (ie exit from the loop).

Example 5

var i = 1;
    console.log("ID: "+i);

We created a variable named i and gave it a value of 1, meaning that the counting loop would start from the number 1. We gave the loop while the condition i was less than or equal to the number 10, i.e. iteration ten times if the set condition was true. And we put a condition when it reaches 8 it stops counting because we put it with a break condition. And we displayed this data across the console by printing the word ID before each number of the counter.

The break command is used to stop the for, while, and do while loop counting at the number specified in the condition.


The continue statement in JavaScript

The continue statement is used with loops and is used to override the execution of specific code in a loop. Where it is used in order to bypass the execution of a specific piece of code (scope).

Example 6

for(var count = 1; count<=10; ++count){
    if(count == 8){
   document.getElementById("while-test").innerHTML +="ID: "+ count + "<br>";

We created a variable and set the number 1, which is the beginning of the counting loop, and the repetition condition is less than or equal to 10. And we set the condition that the number 8 skips in the counting loop by setting the continue function to skip, that is, when the count reaches the number 8, it skips it. We display the data in html and put the <br> element at the end to drop a new line in each count.

Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com