Why Loop?

In programming, a loop is a way to execute a block of code multiple times. A while loop is a type of loop that continues to execute the block of code as long as a certain condition is true.

While Loops

The syntax of a while loop is as follows:

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

condition

Let's look at an example to see how this works. Suppose we want to print the numbers 1 to 5 to the console using a while loop. We can use a variable to keep track of the current number, and the loop will continue as long as the current number is less than or equal to 5:

let num = 1;

while (num <= 5) {
  console.log(num);
  num++;
}

condition

num <= 5

num

console.log(num)

num

num++

num

When the loop has finished executing, the output in the console will be:

1
2
3
4
5

Infinite Loops

condition

let num = 1;

while (num <= 5) {
  console.log(num);
  // we forgot to increment num, so the condition will always be true
}

num++

num

While loops can be a powerful tool for writing efficient and flexible code, but it's important to be careful when using them to avoid creating an infinite loop.

For Loops

A for loop is a type of loop that allows you to execute code repeatedly for a fixed number of times. It is generally going to be your most commonly used looping mechanism.

The Anatomy of a For Loop

A for loop has three parts:

• Initialization: An expression that is executed once before the loop begins. It is typically used to initialize a counter variable.

• Condition: A boolean expression that is evaluated before each iteration of the loop. If the condition is true, the code inside the curly braces is executed.

• Increment: An expression that is executed after each iteration of the loop. It is typically used to update the counter variable.

Here's the syntax of a for loop:

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

Let's look at an example to see how we can use a for loop to print the numbers 1 to 5 to the console. We can use a counter variable that starts at 1 and increments by 1 on each iteration of the loop.

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

In this example, we use let i = 1 to initialize the counter variable i to 1. We then use i <= 5 as the condition, which means that the loop will continue as long as i is less than or equal to 5. Inside the loop, we print the current value of i to the console using console.log(i). We then use i++ to increment i by 1, which means that the value of i will be 2 the next time the condition is evaluated.

When the loop has finished executing, the output in the console will be:

1
2
3
4
5

Optional expressions in a for loop

It's important to note that the initialization, condition, and increment expressions in a for loop are all optional. This means that you can write a for loop with an empty expression for any of these parts.

For example, if you only want to loop a certain number of times, you can write a for loop like this:

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

In this example, we omit the increment expression from the for loop, and instead include i++ inside the loop body. This means that the loop will continue to execute as long as i is less than 5, and we manually increment i inside the loop body.

Common mistakes to avoid

One common mistake when using for loops is creating an infinite loop. This happens when the condition in the for loop is always true, which means that the loop will continue to execute indefinitely.

To avoid creating an infinite loop, make sure that the condition in the for loop will eventually become false. Also, be careful when updating the counter variable to make sure that it's being incremented or decremented correctly.

The for...of loop

The for...of loop allows you to loop over iterable objects, such as arrays and strings. The syntax of a for...of loop is as follows:

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

variable

iterable

[Symbol.iterator]

num

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

for (let num of numbers) {
  sum += num;
}

console.log(sum);

let num

numbers

num

sum

sum += num

sum

When the code is executed, the output in the console will be:

15

The for...in loop

The for...in loop allows you to loop over the properties of an object. The syntax of a for...in loop is as follows:

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

variable

object

name

let people = {
  john: 25,
  mary: 30,
  alice: 35
};

for (let name in people) {
  console.log(name);
}

let name

people

name

console.log(name)

name

When the code is executed, the output in the console will be:

john
mary
alice

These new features of the for loop in ES6 can make your code more concise and easier to read, especially when working with iterable objects and objects with enumerable properties.