A way to repeat a block of code when the number of iterations is known.
for
loops are helpful for repeating statements a certain number of times. For example, a for
loop makes it easy to express the idea "draw five lines" like so:
for (let x = 10; x < 100; x += 20) {
line(x, 25, x, 75);
}
The loop's header begins with the keyword for
. Loops generally count up or count down as they repeat, or iterate. The statements in parentheses let x = 10; x < 100; x += 20
tell the loop how it should repeat:
let x = 10
tells the loop to start counting at10
and keep track of iterations using the variablex
.x < 100
tells the loop to count up to, but not including,100
.x += 20
tells the loop to count up by20
at the end of each iteration.
The code between the curly braces {}
is the loop's body. Statements in the loop body are repeated during each iteration of the loop.
It's common to create infinite loops accidentally. When this happens, sketches may become unresponsive and the web browser may display a warning. For example, the following loop never stops iterating because it doesn't count up:
for (let x = 10; x < 100; x = 20) {
line(x, 25, x, 75);
}
The statement x = 20
keeps the variable x
stuck at 20
, which is always less than 100
.
for
loops can also count down:
for (let d = 100; d > 0; d -= 10) {
circle(50, 50, d);
}
for
loops can also contain other loops. The following nested loop draws a grid of points:
// Loop from left to right.
for (let x = 10; x < 100; x += 10) {
// Loop from top to bottom.
for (let y = 10; y < 100; y += 10) {
point(x, y);
}
}
for
loops are also helpful for iterating through the elements of an array. For example, it's common to iterate through an array that contains information about where or what to draw:
// Create an array of x-coordinates.
let xCoordinates = [20, 40, 60];
for (let i = 0; i < xCoordinates.length; i += 1) {
// Update the element.
xCoordinates[i] += random(-1, 1);
// Draw a circle.
circle(xCoordinates[i], 50, 20);
}
If the array's values aren't modified, the for...of
statement can simplify the code. They're similar to for
loops in Python and for-each
loops in C++ and Java. The following loops have the same effect:
// Draw circles with a for loop.
let xCoordinates = [20, 40, 60];
for (let i = 0; i < xCoordinates.length; i += 1) {
circle(xCoordinates[i], 50, 20);
}
// Draw circles with a for...of statement.
let xCoordinates = [20, 40, 60];
for (let x of xCoordinates) {
circle(x, 50, 20);
}
In the code snippets above, the variables i
and x
have different roles.
In the first snippet, i
counts from 0
up to 2
, which is one less than xCoordinates.length
. i
is used to access the element in xCoordinates
at index i
.
In the second code snippet, x
isn't keeping track of the loop's progress or an index. During each iteration, x
contains the next element of xCoordinates
. x
starts from the beginning of xCoordinates
(20
) and updates its value to 40
and then 60
during the next iterations.
Examples
Related References
stringify
From the MDN entry: The JSON.stringify() method converts a JavaScript object or value to a JSON string.
log
Prints a message to your browser's web console.
===
The strict equality operator === checks to see if two values are equal and of the same type.
Array
A list that keeps several pieces of data in order.