JavaScript Loops

A loop in JavaScript is a control flow statement that allows you to repeatedly execute a block of code as long as a certain condition is true.

There are several types of loops in JavaScript, including the for loop, while loop, and do-while loop.

Each of these loops have a specific syntax and can be used to accomplish different tasks.

The For Loop

The for loop in JavaScript is a control flow statement that allows you to iterate over a collection of elements, such as an array or an object, and perform a certain action on each element.

It has the following syntax:

for (initialization; condition; increment) {
  // code to be executed
}

The initialization statement is executed before the loop starts.

The condition statement is evaluated before each iteration of the loop and the loop will continue to execute as long as the condition is true.

The increment statement is executed after each iteration.

Here is an example of using a for loop to iterate over an array and print out each element:

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

This will output 1, 2, 3, 4, 5 in the console one at a time.

You can also use a for-of loop to iterate over the elements of an array or an iterable object.

let arr = [1, 2, 3, 4, 5];
for (let element of arr) {
  console.log(element);
}

This will also output 1, 2, 3, 4, 5 in the console one at a time.

You can use for-in loop to iterate over the properties of an object.

let obj = {a:1, b:2, c:3};
for (let key in obj) {
  console.log(key);
  console.log(obj[key]);
}

This will output the key-value pair of the object such as a 1 b 2 c 3 in the console one at a time.

The For in Loop

The for-in loop in JavaScript is a control flow statement that allows you to iterate over the properties of an object. It has the following syntax:

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

The variable is a variable that will take on the name of each property as the loop iterates over the object. The object is the object whose properties you want to iterate over.

Here is an example of using a for-in loop to iterate over the properties of an object and print out the property name and its value:

let obj = {a:1, b:2, c:3};
for (let key in obj) {
  console.log(key + ": " + obj[key]);
}

This will output a: 1, b: 2, c: 3 in the console one at a time.

It's important to note that for-in loops will iterate over all enumerable properties of an object, including those that are inherited through the prototype chain.

So, if you want to only iterate over the object's own properties, you should use the Object.hasOwnProperty() method to check if the property belongs to the object before executing the code inside the loop.

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ": " + obj[key]);
  }
}

It is also worth noting that for-in loop is not recommended to use on arrays, as the order of iteration may not be predictable, for arrays it is better to use for or for-of loop.

The For of Loop

The for-of loop in JavaScript is a control flow statement that allows you to iterate over the elements of an array or an iterable object. It has the following syntax:

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

The variable is a variable that will take on the value of each element as the loop iterates over the iterable.

The iterable is the object whose elements you want to iterate over, such as an array or a string.

Here is an example of using a for-of loop to iterate over the elements of an array and print out each element:

let arr = [1, 2, 3, 4, 5];
for (let element of arr) {
  console.log(element);
}

This will output 1,2,3,4,5 in the console one at a time.

You can also use for-of loop to iterate over the characters of a string:

let str = "hello";
for (let char of str) {
  console.log(char);
}

This will output h,e,l,l,o in the console one at a time.

You can also use for-of loop to iterate over any iterable object, including:

  • Array
  • String
  • Set
  • Map
  • Array-like objects (e.g. arguments or NodeList)
  • Some other built-in objects like TypedArray.

It's worth noting that for-of loop does not work with plain objects, it only works with iterable objects, if you want to iterate over plain objects you have to use for-in loop or Object.keys() method.

The While Loop

The while loop in JavaScript is a control flow statement that allows you to repeatedly execute a block of code as long as a certain condition is true.

The syntax for a while loop is as follows:

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

The condition is evaluated before each iteration of the loop and the loop will continue to execute as long as the condition is true.

Here is an example of using a while loop to print the numbers from 1 to 5:

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

This will output 1, 2, 3, 4, 5 in the console one at a time.

It's important to make sure that the condition in the while loop eventually becomes false, otherwise it will cause an infinite loop which will crash the browser or the runtime environment.

It's also possible to use the do-while loop which is similar to while loop but the code block within the loop will execute at least once, regardless of the condition, before the condition is evaluated.

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);

This will also output 1, 2, 3, 4, 5 in the console one at a time.

It's important to note that while and do-while loops are suitable for situations where the number of iterations is not known in advance, such as when you're reading data from a file or a network.

JS Basics