Mastering JavaScript Conditionals

Mastering JavaScript Conditionals

How to use the if...else statements

Hello World, Akwaaba! I trust your journey to become a top notch JS developer is on course ? JavaScript is seen to be a very tough programming language to grasp, hence, sharing my thoughts and insights to make the language very comprehensible. See me as your digital pal , helping you on the journey to greatness.

In today's post, let's have a discussion on conditional statements in JavaScript, we will learn

  • How to use conditional statements

  • Different types of conditional statements

  • The "if" statement

  • The If... Else statement

  • The Else if statement

Let's get started.

How To Use Conditional Statements

In JavaScript, most often we need to control how a block of code will behave based on certain conditions. Conditional statements or control structures helps us take decisions with code and give us more control over how our code will be executed. You will need to give your code a condition, when the condition has been met, a specified statement will be executed and when the condition is not met, we allow the different statement to run.

Different Types Of Conditional Statements

There are basically three types of conditional statements in JavaScripts

  • If statement

  • If ... Else statement

  • If...Else If...Else statement

The "If" Statement

The if(...) examines a condition that will be given to it, and if the result of the condition is true, it executes a block of code in the curly braces {}

The "If" Statement Syntax

This is how the if statement syntax looks like

if(condition){   /*block of code to be executed if the condition is true*/  }

The if statement only runs if the condition enclosed in the parenthesis is truthy.

Example of Using The If Statement

if(20>5){
    console.log("Yes, 20 is definitely greater than 5")
}

A breakdown of what is happening in the example above

  • The keyword if , tells JavaScript to start the conditional statement

  • The (20 > 5) is the condition we are testing for, because 20 is definitely greater than 5, the expression is evaluated as true.

  • The condition can be any valid JS expression that has its result to be true

  • The part contained in the {} curly braces is the block of code to run if the given condition is true. With the example above, the condition (20 > 5) evaluates to be true.

  • Now, since the condition is true, that block of code is executed.

Another example of the use of the if Statement

Let's see how we can use the if statement, in the example below.

let age = +prompt("how old are you?");
/*Ask of the users age */
if(age >=18){
/*evaluates the condition (age >=18) and if its true then the code below gets executed */
    alert("You are qualified to enter the club")
}

In summary, you provide the the if statement a condition, and when the condition is evaluated to be true, then a block of code in curly braces {} will get executed.

If...Else Statement

The "else" statement helps to extend the if statement. In a situation where the condition does not pass (i.e result of the condition is false), then, the else statement ensures another block of code get executed.

Syntax for the If...Else Statement

Let's take a look at the syntax for the if... else statement

if(condition){

/*lines of code to be executed if the condition is true*/
}else{
/*lines of code to be executed if the condition is false*/
}

Let's extend our initial if statement to include an else statement.

let age = +prompt("how old are you?");
if(age >=18){
/*evaluates the condition (age >=18) and if its true then the code below gets executed */
    alert("You are qualified to enter the club")
} else {
    /*executes this block of code if the condition is false i.e age is not greater than or equal to 18*/
    alert("Too young to enter the club")
}

Here is what is happening above:

  • First, the prompt ask for the age of the user

  • If the age entered by the user meets the condition (age >=18) then the first block of code after the condition will be executed

  • However, if the age entered by the user does not meet the condition (i.e User entered a age less than 18) then the else statement will ensure the next block of code after the keyword else is executed.

The Else if Statement

You can also extend the if statement with an else if statement. This adds another condition with its own block of code

Syntax for the else if statement.

The below is the syntax for the else if statement.

if(condition1){
/*lines of code to be executed if condition1 is evaluated to be true */
}else if(condition2){
/*lines of code to be executed when condition2 is rather evaluated to be true */
}else{
/* Lines of code to be executed when condition1 and condition2 are not true */
}

Let's now take a look at how the else if statement works.

In the example below, we ask the user to enter two numbers and output some messages based on certain conditions.

let  num1 = +prompt("Please enter the first number");
let num2 = +prompt("Please enter the second number");

/* provide the  conditions */
if(num1 === num2){
/*Checks if condition1 is true and executes the alert in the first curly braces {} */
    alert("You entered the same numbers")
}else if(num1 > num2){
/* Checks if expression in condition2 is also evaluated to be true and executes the alert in that block of code */
    alert("first number is greater than the second number")
}else {
/*if both condition1 and condition2 are false, then show this message */
    alert("The second number is surely greater than the first number")
}

How the code above works

  • We ask the user to enter two different numbers and store the values in variables num1 and num2 respectively.

  • Next, we check if condition1 has been met, which is the value in num1 is equal to the value in num2

  • If the condition1 is true, we execute the first block of code

  • The else if provides the code with another condition, we are checking if the value stored in num1 is greater than the value stored in num2. If that is also true, we execute the block of code in the {} curly braces after the else if.

  • If both condition1 and condition2 has not been met (are false) then we execute the last part of the block of code.

In Conclusion

The conditional statements control actions and determine whether or not pieces of code can run. You can use multiple if else conditionals, but note that only the first else if block runs. JavaScript skips any remaining conditionals after it runs the first one that passes. Keep in mind that, an else if statement doesn’t need a following else statement to work. If none of the if or else if conditions pass, then JavaScript moves forward and doesn’t run any of the conditional blocks of code.

Hope you have a clear understanding of how to use conditional statements to make decisions in your code. Let me know what you think. Me daa se.

P.S " Akwaaba" and "Me daa se" is a Ghanaina local dialect meaning "Welcome" and "Thank You" respectively