If Statements in JavaScript

If statements allow you to add conditional code that is run based on the result from a, or multiple, states. You can use if statements to add code that is only run based on some state, such as if a user is signed in or if a certain variable matches a criteria.

The below code snippet shows a very simple if statement written in JavaScript. The condition of the if statement is enclosed in parenthesis ‘(..)’ and the code to be executed is enclosed within curly brackets ‘{…}’. The condition within the code snippet is checking if the number 3 is less than the number 4, if this condition is true than the code enclosed in the curly brackets will be executed. It important to note that if the condition results to false, and is not true, then the code will not be executed. The code to be executed is a simple log statement, that prints a String to the console. In this example the code will always be executed, as the number 3 is less than the number 4.

If statement conditions can also be based on boolean variables. All conditions must result to a boolean result, such as if one number is less than another number. The below code example shows how booleans can be used within if statements directly, without using any numeric values or relational operators. The example below shows using a boolean value, but boolean variables can also be used too.

At the end of if statements an ‘else block’ can also be added. The else block contains code wrapped in curly brackets ‘{..}’ similar to the if statements code. The else block will only be executed if the previous condition fails, and results in a false value. The below code snippet shows a basic if statement with an additional else block. The if condition is checking if the number 3 is less than the number 2, which is similar to the previous example. Both the code within the if statement and the code within the else statement simply prints a String value to the console, but the strings are different. In this example the code within the else block will be executed, and the code within the if block will not be executed. This is because the number 3 is not less than the number 2, therefore the if condition fails and the else block is executed rather than the code inside the if statement.

You can add multiple conditions to an if statement, this is useful for situations where you want the code to react in different ways depending on a certain value or condition. These are called ‘else if’ block. You want to run certain code if a statement is code, else you want to run other code if a different statement is true. The below code shows an if and else if statement. The if statement is checking if the variable ‘a’ is less than the variable ‘b’, and if true then the first log statement will be executed. The else if block is checking the opposite, if the variable ‘a’ is more than the variable ‘b’. Only one log statement will be executed, depending on which condition is met. You may think this code could be replaced with an if and else statement, rather than an else if block, but what would happen is the variable ‘a’ and ‘b’ contained the same number? Neither log statement would be executed.

If statements that contain else if block can also contain an else block, but it must be at the end. The below code adds an else block to the end of the previous code, which mean the final log statement will be executed if both variables equal the same number. Else If block are not limited, you can chain as many as you want onto one if statement, just by adding more. If there is an else block it must be at the end, as it’s basically like saying “if all of these other conditions don’t work then run this piece of code”. JavaScript is read line by line, so it must make sense when reading it one line after the other.

Multiple conditions can also be used within if statements. The below code uses two conditions and joins them using the ‘AND’ operator. This means that both the variable ‘a’ has to be less than the variable ‘b’ and less than the variable ‘c’ for the code be executed. You can also use an ‘OR’ operator that is written as two pipe ‘||’ symbols to create more complex conditions inside if statements.

Leave a Reply