p5js week 11

Let's learn another key word for the JavaScript language: if. Here's an example to get us started.

let toasterPluggedIn = true;

if (toasterPluggedIn == true)
  {console.log("First step towards toasting is complete!")}
  else {console.log("Please plug in the toaster.")}

Try that out in the console, then let's check out what's going on in that code.

An if statement has three parts usually. The first part is the condition. It's a test which we want to know is either true or false. The test should be inside parentheses. It has to evaluate to true or false; that means that when all of the sub-parts are calculated, the final value is either true or false, not a number or a string or something else. In the code above, that's the part that says:

if (toasterPluggedIn == true)

Since the variable toasterPluggedIn has been assigned as true, this part of the code will evaluate to true.

In the case of true, the function executes the second part of the statement. When programmers say “execute”, they mean “carry out” or “do”. The second part should be within curly brackets. In the code above, it's this part:

  {console.log("First step towards toasting is complete!")}

If the condition is false, the third part of the if statement is executed. It has the “else” keyword first, and then it's followed by the last part of the if statement inside curly braces. In the code above, it's this part:

  else {console.log("Please plug in the toaster.")}

In the code above, we set the variable toasterPluggedIn to true, so this part doesn't run. However, if we change what it's assigned to and try the if-statement again, we can see this part run:

toasterPluggedIn = false;

if (toasterPluggedIn == true)
  {console.log("First step towards toasting is complete!")}
  else {console.log("Please plug in the toaster.")}

We might want to use that if-statement to check our toaster more often than once, so let's put it in a function to make that easier.

toasterPluggedIn = false;

function checkToasterPower (toasterPowerBoolean) {
  if (toasterPluggedIn == true)
    {console.log("First step towards toasting is complete!")}
    else {console.log("Please plug in the toaster.")}
  return toasterPowerBoolean
  }
  
checkToasterPower (toasterPluggedIn)

Every time we call the checkToasterPower function, it will use the if-statement that we've programmed.

To review, here's the basic pattern for an if statement; you can fill in the blanks:

if () {} else {}

Remember:

1. After writing “if”, put a test inside of parentheses. The test should evaluate to “true” or “false”.
2. The next part is curly braces. Inside the curly braces, put what you want JavaScript to do for you when the test is true.
3. Then we write “else” to divide the if-statements into two parts.
4. After “else”, put curly braces, and inside the curly braces write what you want JavaScript to do when the test is false.