A way to choose whether to run a block of code.
if
statements are helpful for running a block of code based on a condition. For example, an if
statement makes it easy to express the idea "Draw a circle if the mouse is pressed.":
if (mouseIsPressed === true) {
circle(mouseX, mouseY, 20);
}
The statement header begins with the keyword if
. The expression in parentheses mouseIsPressed === true
is a Boolean
expression that's either true
or false
. The code between the curly braces {}
is the if statement's body. The body only runs if the Boolean
expression is true
.
The mouseIsPressed system variable is always true
or false
, so the code snippet above could also be written as follows:
if (mouseIsPressed) {
circle(mouseX, mouseY, 20);
}
An if
-else
statement adds a block of code that runs if the Boolean
expression is false
. For example, here's an if
-else
statement that expresses the idea "Draw a circle if the mouse is pressed. Otherwise, display a message.":
if (mouseIsPressed === true) {
// When true.
circle(mouseX, mouseY, 20);
} else {
// When false.
text('Click me!', 50, 50);
}
There are two possible paths, or branches, in this code snippet. The program must follow one branch or the other.
An else
-if
statement makes it possible to add more branches. else
-if
statements run different blocks of code under different conditions. For example, an else
-if
statement makes it easy to express the idea "If the mouse is on the left, paint the canvas white. If the mouse is in the middle, paint the canvas gray. Otherwise, paint the canvas black.":
if (mouseX < 33) {
background(255);
} else if (mouseX < 67) {
background(200);
} else {
background(0);
}
if
statements can add as many else
-if
statements as needed. However, there can only be one else
statement and it must be last.
if
statements can also check for multiple conditions at once. For example, the Boolean
operator &&
(AND) checks whether two expressions are both true
:
if (keyIsPressed === true && key === 'p') {
text('You pressed the "p" key!', 50, 50);
}
If the user is pressing a key AND that key is 'p'
, then a message will display.
The Boolean
operator ||
(OR) checks whether at least one of two expressions is true
:
if (keyIsPressed === true || mouseIsPressed === true) {
text('You did something!', 50, 50);
}
If the user presses a key, or presses a mouse button, or both, then a message will display.
The body of an if
statement can contain another if
statement. This is called a "nested if
statement." For example, nested if
statements make it easy to express the idea "If a key is pressed, then check if the key is 'r'
. If it is, then set the fill to red.":
if (keyIsPressed === true) {
if (key === 'r') {
fill('red');
}
}
See Boolean and Number to learn more about these data types and the operations they support.
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.