Beginner's Guide to JavaScript: IF Statements

In JavaScript, IF statements are uses to control the flow of code execution, which is why they are known as a control structure. IF statements use boolean expressions to determine if code should be run by the browser. Boolean variables either store true or false. Boolean expressions are equations that can be evaluated to produce a result, which is either true or false. If the IF statement produces true, the code within the IF statement will execute.

For example, this is the basic structure and syntax for writing an IF statement:

          if(boolean expression goes here){
            // the statements inside of the curly braces
            // (AKA code block)
            // will run if the boolean expression
            // evaluates to true
          }
        

So to put this into practice, we can use the boolean expressions of (1 < 1 + 1). To test this expression out in an IF statement, it would look something like this:

          if(1 < 1 + 1){
            console.log("The boolean expression evaluates to true! You can now see this message in the console log.");
          }
        

If the symbol were to change to a greater than symbol (>), then the expression would evaluate to false, and the code would not execute, so in this case, there would not be a message in the console log.

Another way to evaluate if an expression is true or false is to use variables. You can use a variable all by itself for the boolean expression in an IF statement:

          let hungry = true;

          if(hungry){
            console.log("It's time for a snack!");
          }
        

It is common to use an IF statement by checking to see if a variable matches a specific value. This can be done using the equality operator (==).

          let secretPassword = "password";
          let userInput = prompt("Enter the secret password.");

          if(userInput == secretPassword){
            alert("You guessed the secret password!");
          }
        

In the example above, you can see that if the input that the user enters into the prompt is equal to the secretPassword of "password", then the alert statement within the curly braces will execute. It is important to note that the equality operator (==) is separate from the assignment operator (=). The assignment operator is for assigning values to variables, but the equality operator is meant to be used for comparing values to see if they are equal to one another.

IF/ELSE Statements

What happens if the boolean expression results to false? If using the IF statements above, we determined that no code would execute if returned as false. When using IF/ELSE statements, you are able to run a different code if the expression is returned as false. If using the example from above:

          let secretPassword = "password";
          let userInput = prompt("Enter the secret password.");

          if(userInput == secretPassword){
            alert("You guessed the secret password!");
          }else{
            alert("You guessed wrong. Try again!");
          }
        

Ladder IF Statements

IF and IF/ELSE statements use only one boolean expression. Ladder IF statements can be used execute different code, depending on what IF statement evaluates to true. For example, we can use a ladder IF statement to determine if you should stay inside or go outside depending on the temperature outside.

          let temperature = prompt("Enter the outside temperature in Fahrenheit.");

          if(temperature >= 60){
            alert("Enjoy the beautiful weather!");
          }else if(temperature >= 32){
            alert("If you go outside, make sure to wear a sweater!");
          }else if(temperature >= 0){
            alert("Stay inside, or bundle up!");
          }else if(tempearture < 0){
            alert("Stay inside at all costs.");
          }else{
            alert("Invalid input.");
          }