if Statements

Now that we know about the Boolean data type and what conditional flow general is, let’s look at how to program in conditional statements.

A conditional statement is a statement or function that chooses one block of statements over another based on a Boolean value.

In other words;

• if the condition statement receives a true Boolean
  • it will then execute the true statement block.
• else
  • it will then execute the false statement block.

A Note on Statement Blocks

A Statement Block in JavaScript is any set of statements encapsulated within a set of curly-brackets (i.e. { }). So, you have been writing statement blocks when you define the setup() and draw() functions. The code you write between their associated curly-brackets, is their statement block. In other words, the code inside of the curly brackets is the statement block for the function.

function draw(){
    // Everything in here (i.e. between the "{}")
    // is part of the "draw function" statement block.
}

Writing if Statements

In JavaScript, if statements are written like many other functions. We call the function, in this case if and attach a set of parenthesis to it where we pass the necessary parameter. In the case of an if statement, the parameter needs to be a Boolean value (i.e. true or false). This is then followed by a function block to execute if the Boolean is true, and another function block to execute else the Boolean was false. These two function blocks are separated by the else keyword. This will generally look like the following;

if( Boolean ) {
    // some code to execute 'if' true
} else {
    // some code to execute 'else' false
}

NOTE: The ‘else’ function block is optional. If you simply need something to execute, only when true, you can stop after the true function block. In this case, the program will continue on without any additional executions, if a statement was false.

if( Boolean ) {
    // code to execute 'if' true
}

// additional code to execute 'after' the conditional 'if statement' finished execution.
// Regardless of whether it executes the true function block or not.

In Practice

In the following example, the color of an ellipse is set through a conditional if statement. In this example, the color of the ball will always be ‘red’. This is the case because we are always passing the value true as a parameter value to the if statement.

If we instead passed the value false as a parameter to the if statement function, the ellipse would always be ‘blue’. This is because the ‘else’ function block will always execute.

if( false ) {
    fill('red');
} else {
    fill('blue');
}

Using Variables

Obviously, we will want to be able to change the outcome of the if statement based on dynamic conditions of the program’s execution. For this reason, you will likely never pass a Boolean value directly to the if statement as we did above.

Instead you will do one of two things;

1. Pass in a variable, storing a Boolean value of true or false.
2. Pass in a statement that will execute to either true or false.

The following code, sets up a variable, which stores Boolean values. This is then passed as the parameter to the if statement. This variable can then be changed, by the program or user. In the following case however, the value is changed at the end of the draw() loop. When the draw loop comes back around a second time, it is then set to the new value.

A Note on Semicolons

Notice in the above examples, how semicolons are not used after an if statement or its function blocks. Although accidentally including one will likely not break you program, it is consider poor practice to add them.

Also notice, that semicolons are still used to distinguish individual statements within, if statement function blocks.