JavaScript is a text-based scripting language commonly used to add dynamic and interactive elements to static websites to make them visually appealing.
Loops have different syntax in each programming language, but the basic concept (logic) remains the same.
Most programming languages have more than one type of loop. The famous are for and while loop. This guide will only learn about the loop and where it should be used instead of other loops (favored over other loops).
Loops can be interchanged with each other in most cases, but loops should be used when you have to run a determinate number of iterations (when you already know the number of times the loop will run).
For Loop Syntax:
First, we should discuss the syntax for loop uses in JavaScript:
{
Code to be executed
}
In for loop:
- First, initialize/set a variable(initialization runs before the execution of the body) i.e. let i=0;
- Secondly, define the condition for the loop(this statement runs before the execution and decides whether the loop will run or not), i.e., i <= 10;
- Lastly, The third and the last statement runs after the body of the loop is executed. It modifies the value of the variable for the next iteration, i.e i++ or i–
Note: We will use the browser console to demonstrate examples performed in this post. To open up the browser console:
- Use the F12 key in Chrome and other chromium-based browsers.
- Use CTRL + SHIFT + K keyboard shortcut keys for Mozilla.
- Use Option + ⌘ + C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ +, and in Advanced tab check “Show Develop menu in menu bar”).
How to use for loop?
We will take a programmer as an example who has to output a sequence of numbers from one to twenty using JavaScript. They will have to write twenty lines of code to output this sequence. This way of writing code is very inefficient.
We can efficiently write such repetitive tasks using loops. As mentioned above, the number of lines in the program can be reduced from twenty to four using a for a loop.
{
console.log(number);
}
Now let’s discuss how a for loop actually works. The first statement, i.e., initialization, runs before the statements present inside the body of the loop and sets a variable. The second statement also runs before the execution of the block of code. It defined the condition for the loop. This statement decides whether the loop will run for the next iteration or stop at the current iteration. The third and the last statement runs after the statements inside the loop are executed. It is incrementing the value present inside the variable.
We can also decrement the value of a variable in a loop. Now we will output the sequence from twenty to one in descending order:
{
console.log(number);
}
What is for/in the loop?
The for/in loops are used to loop through the properties present inside an object. It comes in handy when you have to run a loop through an object but don’t know the number of properties present in the object.
Syntax:
{
Statements
}
- Here var is used to store a different property name in each iteration.
- The loop runs through the properties of the specified object.
for (let prop in employee)
{
console.log(prop);
}
What is for/of the loop?
The for/of loops are used to loop through the values of an array.
for (let value of names)
{
console.log(value);
}
for/of loops can also be used to run through the values of a string.
Conclusion
Loops are used to write concise and efficient code. They eliminate repetitiveness from code. They are a fundamental part of any major programming language.
As mentioned above, for loops, take three arguments. The first argument/parameter is the initializer that sets the variable. The second argument is the condition; The loop will continue running until that condition becomes false. The third and the last argument is used to modify the variable which was set in the first argument. All of these three arguments are optional. These three arguments should always be specified despite them being optional. Failing to give arguments to a loop can create an infinite loop that can cause a crash program. The for loops are generally used when the coder knows the number of times the loop will run.
In this how to guide, we learned to use for loops using JavaScript syntax. We have also learned about for/in and /of loops.
