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

• Initialization: This is the first part of the for loop and is used to initialize a loop counter variable. This is usually done by declaring a variable and assigning it a starting value. For example:

let i = 0;

• Condition: This is the second part of the for loop and is used to specify the condition that must be met for the loop to continue running. As long as the condition is true, the loop will continue to execute. When the condition becomes false, the loop will stop. For example:

i < 10

• Increment/Decrement: This is the third part of the for loop and is used to increment or decrement the loop counter variable. For example:

i++

• Code to be executed: This is the code that will be executed as long as the condition is true. For example:

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

This for loop will print the numbers 0 through 9 to the console.

Now imagine this is our syntax of for loop:

For (statement1; statement2; statement 3){
//code to be executed
}

Now we will explain each statement one by one when and how it will be executed.

✨ 1. Initialization (statement1): The first step in a for loop is the initialization, which is the first statement inside the for loop. This statement is executed only once, before the loop starts. It is used to initialize a loop counter variable, which is a variable that is used to keep track of the number of times the loop has run.

For example:

  for (let i = 0; statement2; statement3) {
  // code to be executed
  }

In this example, the loop counter variable is i, which is initialized to 0.

✨ 2. Condition (statement2): The second step in a for loop is the condition, which is the second statement inside the for loop. This statement is evaluated before each iteration of the loop. If the condition evaluates to true, the loop will continue to run. If the condition evaluates to false, the loop will stop running.

For example:

for (statement1; i < 10; statement3) {
// code to be executed
}

In this example, the condition is i < 10, which means that the loop will continue to run as long as i is less than 10.

✨ 3. Code block:: If the condition is true, the code inside the for loop's code block will be executed. This is the third step in a for loop.

For example:

for (statement1; statement2; statement3) {
 
    console.log(i);
}

In this example, the code block consists of a single line that prints the value of i to the console.

✨ 4. Increment/Decrement (statement3): The fourth and final step in a for loop is the increment/decrement, which is the third statement inside the for loop. This statement is executed after each iteration of the loop. It is used to update the loop counter variable so that the loop can continue running or stop when the condition is met.

For example:

for (statement1; statement2; i++) {
// code to be executed
}

In this example, the increment/decrement statement is i++, which means that the value of i will be increased by 1 after each iteration of the loop.

😊 Here is an example of a for loop that puts all these steps together:

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

This for loop will print the numbers 0 through 9 to the console. The loop will start by initializing the loop counter variable i to 0. It will then check the condition i < 10, which will be true because 0 is less than 10. The code inside the loop's code block, which is console.log(i), will be executed, printing the value of i (0) to the console. The increment/decrement statement i++ will then be executed, increasing the value of i by 1. The loop will then repeat, starting with the condition statement again. This process will continue until the value of i becomes 10, at which point the condition i < 10 will be false and the loop will stop.

Initialization (e.g. let i = 0)
 
Loop:
Condition (e.g. i < 10)
If condition is true:
Code block (e.g. console.log(i))
Increment/decrement (e.g. i++)
Go back to Loop
If condition is false:
Exit loop

✨ 1. Printing the numbers from 1 to 10:

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

This for loop will print the numbers 1 through 10 to the console.

✨ 2. Printing the numbers from 10 to 1:

for (let i = 10; i >= 1; i--) {
console.log(i);
}

This for loop will print the numbers 10 through 1 to the console.

✨ 3. Printing the even numbers from 1 to 10:

for (let i = 2; i <= 10; i += 2) {
console.log(i);
}

This for loop will print the even numbers 2, 4, 6, 8, and 10 to the console.

✨ 4. Printing the odd numbers from 1 to 10:

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

This for loop will print the odd numbers 1, 3, 5, 7, and 9 to the console.

✨ 5. Calculating the sum of the first 10 numbers:

let sum = 0;
for (let i = 1; i <= 10; i++) {
sum += i;
}
console.log(sum);

This for loop will calculate the sum of the first 10 numbers (1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10)=55 and print the result to the console.

✨ 6. Calculating the sum of the first 10 even numbers:

let sum = 0;
for (let i = 2; i <= 10; i += 2) {
sum += i;
}
console.log(sum);

This for loop will calculate the sum of the first 10 even numbers (2 + 4 + 6 + 8 + 10)=30 and print the result to the console.

✨ 7. Calculating the sum of the first 10 odd numbers:

let sum = 0;
for (let i = 1; i <= 10; i += 2) {
sum += i;
}
console.log(sum);

This for loop will calculate the sum of the first 10 odd numbers (1 + 3 + 5 + 7 + 9)=25 and print the result to the console.

for (let i = 10; i >= 1; i--) {
console.log(i);
}

This for loop will print the numbers 10 through 1 to the console.

A for-in loop is a looping construct in JavaScript that allows you to iterate over the properties of an object. Here's the syntax for a for-in loop:

?? Syntax of the for-in loop:

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

The variable is a variable that takes on the value of each property name in the object as the loop iterates. The object is the object whose properties you want to access.

Here's an example of a for-in loop that iterates over the properties of an object:

let person = {
name: 'John',
age: 30,
job: 'teacher'
};
 
for (let prop in person) {
console.log(prop + ': ' + person[prop]);
}

This would output the following:

    name: John
    age: 30
    job: teacher

Note that the for-in loop will iterate over all enumerable properties of the object, including inherited properties. If you only want to iterate over the object's own properties, you can use the Object.keys() method to get an array of the object's own enumerable properties, and then use a for-of loop to iterate over the array:

    for (let prop of Object.keys(person)) {
    console.log(prop + ': ' + person[prop]);
}

It's also important to note that the order in which the properties are iterated is not guaranteed and may vary from one browser to another. If you need to iterate over the properties in a specific order, you can use an array of objects with the desired order, and then use a for-of loop to iterate over the array.

⚡ Playground

A for-of loop is a looping construct in JavaScript that allows you to iterate over the elements of an iterable object, such as an array or a string. Here's the syntax for a for-of loop:

?? Syntax of the for-in loop:

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

The variable is a variable that takes on the value of each element in the iterable object as the loop iterates. The iterable object is the object whose elements you want to access.

Here's an example of a for-of loop that iterates over the elements of an array:

let colors = ['red', 'green', 'blue'];
 
for (let color of colors) {
console.log(color);
}
 

This would output the following:

red
green
blue

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

let message = 'Hello World';
 
for (let char of message) {
console.log(char);
}

This would output the following:

H
e
l
l
o
 
W
o
r
l
d

Note that the for-of loop is only designed to work with iterable objects, so you cannot use it to iterate over the properties of an object like you can with a for-in loop. If you want to iterate over the properties of an object, you can use a for-in loop or use the Object.keys() method to get an array of the object's own enumerable properties, and then use a for-of loop to iterate over the array.

⚡ Playground