JavaScript Loop

JavaScript Loop is used to execute a section of code many times

JavaScript Loops: Loops are useful if you want to run the same code multiple times, each time with a new value. When working with arrays, this is frequently the case:

Instead of writing:

• text += cars[0] + <br>;
• text += cars[1] + <br>;
• text += cars[2] + <br>;
• text += cars[3] + <br>;
• text += cars[4] + <br>;
• text += cars[5] + <br>;

You can write:

JavaScript Code:

var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + '<br>';
}

Different Kinds of Loops

JavaScript provides various types of loops:

• for - loops over a block of code several times.
• for/in - loops over an object's properties
• for/of - loops through an iterable object's values
• while - cycles through a piece of code as long as a stated condition is true.
• do/while - loops through a piece of code while a particular condition is true.

Javascript For Loop

The syntax for the for loop is as follows:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

• Statement 1 is executed (once) before the code block is executed.
• Statement 2 specifies the circumstance under which the code block will be executed.
• After the code block has been performed, Statement 3 is executed (every time).

for (i = 0; i < 5; i++) {
  text += 'The number is ' + i + '<br>';
}

From the code above, you can read:

• Statement 1 initializes a variable (var i = 0) before the loop begins.
• Statement 2 specifies the condition under which the loop will run (i must be less than 5).
• Statement 3 increments a value (i++) each time the loop's function is executed.

Statement 1

Statement 1 is normally used to initialize the variable used in the loop (i = 0). This is not always the case, and JavaScript is unconcerned about it. Statement 1 is not required. In statement 1, you can start numerous values (separated by a comma):

for (i = 0, len = cars.length, text = ''; i < len; i++) {
  text += cars[i] + '<br>';
}

You can also omit statement 1 (for example, if your values are already set before the loop begins):

var i = 2;
var len = cars.length;
var text = '';
for (; i < len; i++) {
  text += cars[i] + '<br>';
}

Statement 2

Statement 2 is frequently used to assess the condition of the initial variable. This is not always the case, and JavaScript is unconcerned about it. Statement 2 is optional as well. If statement 2 returns true, the loop will be restarted; if it returns false, the loop will be terminated. If statement 2 is omitted, a break must be provided within the loop. Otherwise, the cycle will never come to an end. This will cause your browser to crash. Breaks are covered in a subsequent chapter of this lesson. Statement 3 Statement 3 frequently increases the value of the initial variable. This is not necessarily true, JavaScript is unconcerned, and statement 3 is optional. Statement 3 can do any operation, such as a negative increment (i—), a positive increment (i = i + 15), or nothing at all. Statement 3 can alternatively be omitted (as when incrementing numbers within the loop):

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + '<br>';
  i++;
}

JavaScript For In Loop

The For/In Loop: The for/in statement in JavaScript runs through the properties of an Object:

Syntax

for (key in object) {
  // code block to be executed
}

var person = { fname: 'John', lname: 'Doe', age: 25 };
var text = '';
var x;
for (x in person) {
  text += person[x];
}

Code Explained

• The for in loop iterates over a person object
• Each iteration returns a key (x)
• The key is used to access the value of the key
• person[x] represents the value of the key.

Javascript For/In

The JavaScript for/in statement can also loop over the properties of an Array:

Syntax

for (variable in array) {
  code;
}

var numbers = [45, 4, 9, 16, 25];
var txt = '';
var x;
for (x in numbers) {
  txt += numbers[x] + '<br>';
}
document.getElementById('demo').innerHTML = txt;

If the order of the indexes is crucial, do not use for in over an Array. Because index order is implementation-dependent, array values may not be retrieved in the expected order. When the order is crucial, use a for loop, a for of loop, or Array.forEach().

Javascript Array.forEach():

For each array element, the forEach() method calls a function (a callback function).

var txt = '';
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
  txt = txt + value + '<br>';
}

The function takes 3 arguments:

• The item value
• The item index
• The array itself

The example above uses only the value parameter. The example can be rewritten to:

var txt = '';
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + '<br>';
}

Javascript For/Of Loop

The for/of statement loops through the values of an iterable object in JavaScript. It allows you to loop over iterable data structures like Arrays, Strings, Maps, NodeLists, and others:

Syntax

for (variable of iterable) {
  // code block to be executed
}

The for/of statement loops through the values of an iterable object in JavaScript. It allows you to loop over iterable data structures like Arrays, Strings, Maps, NodeLists, and others:

iterable - An object whose properties can be iterated.

Looping over an Array

let cars = ['BMW', 'Volvo', 'Mini'];
let text = '';

for (let x of cars) {
  text += x + '<br>';
}

Looping over a String

let language = 'JavaScript';
let text = '';

for (let x of language) {
  text += x + '<br>';
}

The While Loop: The while loop repeats a section of code as long as a defined condition is true.

Syntax

while (condition) {
  // code block to be executed
}

The code in the loop in the following JavaScript code will be executed repeatedly as long as a variable I is less than 10:

while (i < 10) {
  text += 'The number is ' + i;
  i++;
}

The loop will never terminate if you forget to raise the variable used in the condition. This will cause your browser to crash.

Javascript Do/While Loop

The do/while loop is an alternative to the while loop. This loop will execute the code block once before checking to see if the condition is true, and then it will loop as long as the condition is true.

Syntax

do {
  // code block to be executed
} while (condition);

The do/while loop is used in the JavaScript code below. Because the code block is run before the condition is tested, the loop will always be executed at least once, even if the condition is false:

do {
  text += 'The number is ' + i;
  i++;
} while (i < 10);

If you don't raise the variable used in the condition, the loop will never stop!

Comparing For and While Loops

If you studied the preceding chapter about the for loop, you will notice that a while loop is quite similar to a for loop, with the exception of statements 1 and 3. The for loop in this code is used to collect the automobile names from the cars array

var cars = ['BMW', 'Volvo', 'Saab', 'Ford'];
var i = 0;
var text = '';

for (; cars[i]; ) {
  text += cars[i] + '<br>';
  i++;
}

The loop in this code uses a while loop to collect the car names from the cars array:

var cars = ['BMW', 'Volvo', 'Saab', 'Ford'];
var i = 0;
var text = '';
while (cars[i]) {
  text += cars[i] + '<br>';
  i++;
}

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.