JavaScript Loops

loops are one of the fundamental concepts of any programming language, loops allow us to repeat blocks of code multiple times. When we want to repeat certain actions multiple times in our program we use loops. In JavaScript, there are several different types of loops and each is used to perform different types of action, In this article, we are going to learn about them.

For Loop

for is one of the most used loops, for loop repeats until the specified condition evaluates to false.

Syntax:-

for (initialization; condition; incrementExpression) {

// code to be executed

} Initialization: The starting value for the loop counter is set.

Condition: The loop will continue to run as long as the condition is true.

incrementExpression: The counter is updated after each iteration of the loop.

Code: The code inside the loop will be executed as long as the condition is true.

for (let i = 0; i < 5; i++) {
  console.log("Hello world");
}

In the above example, we have initialized i=0 and our condition is i<5 and our increment expression i++ it means i = i+1. Here loop will keep displaying Hello World message to the console until the value of i is less than 5 and each time it displays Hello World message to the console value of i is incremented by 1.

While Loop

Syntax:-

while (condition) {

// code to be executed

}

while loop executes the statement as long as the condition evaluates to true. It stops the execution of the code if the condition evaluates to true.

i = 0;
while (i < 5) {
  console.log("Hello World");
  i++;
}

In the above example, the loop will keep displaying Hello World message to the console, until the value of I, is less than 5, and each time it displays Hello World to the console the i++ statement increases the value of I by 1.

do-while

Syntax:-

do {

// code to be executed

} while (condition);

do...while loop also executes the statement as long as the condition evaluates to true. It stops the execution of the code if the condition evaluates to true. The main difference between while loop and do...while loop is that in do... while loop statement is executed once before checking the condition.

let i = 0;
do {
  console.log("Hello World");
  i++;
} while (i < 5);

for in

for (variable in object) {

// code to be executed for each property

}

The "for in" loop in JavaScript is used to iterate over the properties of an object. Each iteration returns a key and we can use that key to access the values of the object.

let person = {
  name: "John Kumar",
  age: 32,
  occupation: "Full Stack Developer",
  skills: ["Python", "Django", "JavaScript"],
};

for (const key in person) {
  console.log(key); // name age occupation skills
  console.log(person[key]); // ->  John Kumar 32 Full Stack Developer ['Python', 'Django', 'JavaScript' ]
}

in the case of an array, it returns the index of the element.

let fruits = ["apple", "banana", "cherry"];

for (const key in fruits) {
  console.log(key);// 0 1 2
  console.log(fruits[key]); // -> apple banana cherry
}

for of

for (varaible of iterable) {

// code to be executed for each value

}

The "for of" loop in JavaScript is used to iterate over the values of an iterable object such as an array or a string.

let fruits = ["apple", "banana", "cherry"];

for (const value of fruits) {
  console.log(value); // -> apple banana cherry
}

In this example, the fruits array is iterated over using a "for of" loop. The loop variable fruit holds the value of each element in turn. The result is a list of all the elements in the fruits array.

break and continue

The break and continue statements are used in JavaScript to control loop flow.

break

The break statement terminates the loop and moves the control to the next iteration.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(`count is ${i}`);
}

/*
count is 0
count is 1
count is 2
count is 3
count is 4
*/

continue

continue is used to skip the current iteration of a loop and continue with the next iteration. When a continue statement is encountered inside a loop, the current iteration is skipped and the program continues with the next iteration of the loop.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(`count is ${i}`);
}
/*
count is 0
count is 1
count is 2
count is 3
count is 4
count is 6
count is 7
count is 8
count is 9
*/

In this example, the continue statement causes the program to skip 5, and moves the flow to the next iteration.

Conclusion 🙋‍♂️🙋‍♀️

That's it for this article.