How To Create For Loops in JavaScript
This article was originally written for DigitalOcean.
Introduction
Loops are used in programming to automate repetitive tasks. The most basic types of loops used in JavaScript are the while
and do...while
statements, which you can review in "How To Construct While and Do...While Loops in JavaScript."
Because while
and do...while
statements are conditionally based, they execute when a given statement returns as evaluating to true
. Similar in that they are also conditionally based, for
statements also include extra features such as a loop counter, allowing you to set the number of iterations of the loop beforehand.
In this tutorial, we will learn about the for
statement, including the for...of
and for...in
statements, which are essential elements of the JavaScript programming language.
For Loop
The for
statement is a type of loop that will use up to three optional expressions to implement the repeated execution of a code block.
Let's take a look at an example of what that means.
for (initialization; condition; final expression) {
// code to be executed
}
In the syntax above there are three expressions inside the for
statement: the initialization, the condition, and the final expression, also known as incrementation.
Let's use a basic example to demonstrate what each of these statements does.
// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
// Print each iteration to the console
console.log(i)
}
When we run the code above, we'll receive the following output:
0
1
2
3
In the above example, we initialized the for
loop with let i = 0
, which begins the loop at 0
. We set the condition to be i < 4
, meaning that as long as i
evaluates as less than 4
, the loop will continue to run. Our final expression of i++
increments the count for each iteration through the loop. The console.log(i)
prints out the numbers, starting with 0
and stopping as soon as i
is evaluated as 4
.
Without using a loop, we could have achieved that same output by using the following code.
// Set initial variable to 0
let i = 0
// Manually increment variable by 1 four times
console.log(i++)
console.log(i++)
console.log(i++)
console.log(i++)
Without the loop in place, the code block is repetitive and consists of more lines. If we needed to increment through more numbers we would have needed to write even more lines of code.
Let's go over each expression in the loop to understand them fully.
Initialization
Our first expression is the initialization. This is what it looks like.
let i = 0
We're declaring a variable called i
with the let
keyword (the keyword var
may also be used) and giving it a value of 0
. While the variable can be named anything, i
is most frequently used. The variable i
stands for iteration, is consistent, and keeps the code compact.
Condition
Just as we saw in the while
and do...while
loops, for
loops usually contain a condition. Here is our condition statement.
i < 4
We already established that our iteration variable, i
, represents 0
to start. Now we are saying that the condition is true
as long as i
is less than 4
in this example.
Final Expression
The final expression is a statement that is executed at the end of each loop. It is most often used to increment or decrement a value, but it can be used for any purpose.
i++
In our example, we are incrementing the variable by one, with i++
. This is the same as running i = i + 1
.
Unlike the initialization and condition expressions, the final expression does not end with a semicolon.
Putting it Together
Now that we've reviewed our three expressions contained in the for
loop, we can take a look at the complete loop again.
// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
console.log(i)
}
First, we are declaring i
and setting it to 0
. Then, we are setting a condition for the loop to run until i
is less than 4
. Finally, we're incrementing i
by one 1 each iteration. Our code block prints the value of i
to the console, so our result is 0
, 1
, 2
, and 3
as output.
Optional Expressions
All three expressions in the for
loop are optional. For example, we can write the same for
statement without the initialization expression by initializing the variable outside of the loop.
// Declare variable outside the loop
let i = 0
// Initialize the loop
for (; i < 4; i++) {
console.log(i)
}
0
1
2
3
In this case, the first ;
is necessary to denote whether the statement refers to initialization, condition, or final expression, even when it's omitted.
Below, we can also remove the condition from the loop. We will use an if
statement combined with break
to tell the loop to stop running once i
is greater than 3
, which is the reverse of the true
condition.
// Declare variable outside the loop
let i = 0
// Omit initialization and condition
for (; ; i++) {
if (i > 3) {
break
}
console.log(i)
}
0
1
2
3
Warning: The
break
statement must be included if the condition is omitted, otherwise the loop will run forever as an infinite loop and potentially crash the browser.
Lastly, the final expression can be removed by putting it at the end of the loop instead. Both semicolons must still be included, or the loop will not function.
// Declare variable outside the loop
let i = 0
// Omit all statements
for (;;) {
if (i > 3) {
break
}
console.log(i)
i++
}
0
1
2
3
As we can see from the above examples, including all three statements generally produces the most concise and readable code. However, it's useful to know that statements can be omitted in case you encounter it in the future.
Modifying an Array
We can use for
loops to modify an array.
In the next example, we'll create an empty array and populate it with the loop counter variable.
// Initialize empty array
let arrayExample = []
// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
// Update array with variable value
arrayExample.push(i)
console.log(arrayExample)
}
Running the JavaScript code above will result in the following output.
[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]
We set a loop that runs until i < 3
is no longer true
, and we're telling the console to print the arrayExample
array to the console at the end of each iteration. With this method, we can see how the array updates with the new values.
Length of an Array
Sometimes, we might want a loop to run a number of times without being certain of what the number of iterations will be. Instead of declaring a static number, as we did in previous examples, we can make use of the length
property of an array to have the loop run as many times as there are items in the array.
// Declare array with 3 items
let fish = ['flounder', 'salmon', 'pike']
// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
// Print each item to the console
console.log(fish[i])
}
We'll receive the following output.
flounder
salmon
pike
In this example, we increment through each index of the array with fish[i]
(e.g. the loop will increment through fish[0]
, fish[1]
, etc.). This causes the index to dynamically update with each iteration.
More detail on the for
statement is available on the Mozilla Developer Network.
For...In Loop
The for...in
statement iterates over the properties of an object. To demonstrate, we will make a simple shark
object with a few name:value pairs.
const shark = {
species: 'great white',
color: 'white',
numberOfTeeth: Infinity,
}
Using the for...in
loop, we can easily access each of the property names.
// Print property names of object
for (attribute in shark) {
console.log(attribute)
}
species
color
numberOfTeeth
We can also access the values of each property by using the property name as the index value of the object.
// Print property values of object
for (attribute in shark) {
console.log(shark[attribute])
}
great white
white
Infinity
Putting them together, we can access all the names and values of an object.
// Print names and values of object properties
for (attribute in shark) {
console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`)
}
SPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity
We used the toUpperCase()
method to modify the property name, and followed it by the property value. for...in
is an extremely useful way to iterate through object properties.
Review for...in
on the Mozilla Developer Network for more detailed information.
For...Of Loop
The for...in
statement is useful for iterating over object properties, but to iterate over iterable objects like arrays and strings, we can use the for...of
statement. The for...of
statement is a newer feature as of ECMAScript 6. ECMAScript (or ES) is a scripting-language specification created to standardize JavaScript.
In this example of a for...of
loop, we will create an array and print each item in the array to the console.
// Initialize array of shark species
let sharks = ['great white', 'tiger', 'hammerhead']
// Print out each type of shark
for (let shark of sharks) {
console.log(shark)
}
We'll receive the following as output from the for...of
statement.
great white
tiger
hammerhead
It is also possible to print out the index associated with the index elements using the entries()
method.
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
console.log(index, shark)
}
0 'great white'
1 'tiger'
2 'hammerhead'
A string can be iterated through in the same way as an array.
// Assign string to a variable
let sharkString = 'sharks'
// Iterate through each index in the string
for (let shark of sharkString) {
console.log(shark)
}
s
h
a
r
k
s
In this case, we looped through each character in the string, printing them in sequential order.
For a more detailed account of the differences between for...in
and for...of
, read about for...of
loops on the Mozilla Developer Network.
Conclusion
In this tutorial, we learned how to construct for
loops in JavaScript, consisting of the for
, for...of
and for...in
statements.
Loops are an integral part of programming in JavaScript, and are used for automating repetitive tasks and making code more concise and efficient.
Comments