JavaScript Basics: Conditional Statements

Hello Everyone, How are you ? I hope you are fine and getting master in JavaScript day by day. Today, we'll learn about JavaScript Conditional Statements. Again its name tells the story. Yes,you are correct. It is condition based statements. In the previous article, we have given you a short description about Conditional Statements.

Today, we'll understand in more detail. So let's start it :

The if Statement

We use the if Statement only when condition is true.

<script>

   var number = 15;

   if (number > 10)

   {
        console.log("Number is greater than 10"); 
   }

   // Output : Number is greater than 10

 </script>

If we above change the number from 15 to less than 10, then it won't print code inside if block

The else Statement

Let's understand it with a very simple example. In India, If you are under 18, you can't vote. It means either you must be under 18 or above 18.

 <script>

    var age = 20;

    if (age > 18)
     {
        console.log("Yes,You can vote");   // If condition is true, it print this block
    }
     else 
     {
        console.log("Sorry,You can't vote"); // If condition is false, it print this block
    }

// Output : "Yes,You can vote"

 </script>

At very first line, we have declared a variable age = 20; So what does it means ? It means he/she is eligible for voting. So the first block of code i.e. if {...} runs.

Now, a simple task for you. Let's change the age value to less than 18 and see the output.

Now, after changing the value to less than 18, it will print else{...} code. This is because if you noticed in the first if {..} code,we have provided a condition in (age > 18) brackets. So it works based on the condition.

If condition is True, print if {...} code and if condition is False, print else{...} code.

The else if Statement

What if , if we have more than 2 conditions to check ? Let's undestand it with simple example : We are conducting a exam where-

• If you achieve 80% or more,then Marks are Brilliant.

• If you scored more than 60 but less than 80,Marks are Good.

• If you scored more than 45 but less than 60,Marks are Average.

• If you scored less than 45, Marks are so Poor.

Here is the code :

 <script>

    var marks = 93;

  if (marks >= 80 && marks <=100) 
  {
    console.log("Marks are brilliant");
  }

  else if (marks >= 60 && marks < 80)
   {
    console.log("Marks are Good");
  }

  else if (marks >= 45 && marks < 60) 
  {
    console.log("Marks are Average");
  }

  else if (marks < 45 )
  {
    console.log("Marks are so Poor");
  }

  else
  {
    console.log("Please enter Marks from 0-100");
  }

  // Output: Marks are so Poor

 </script>

First, we have declared a marks variable with a value of 93. So our marks lies on the first if {..} code. Therefore,it will print Marks are brilliant.

Now change the marks variable value from 0-100 and see the results. Here, we have used multiple if else conditions.

I hope you must have understood about it.

Switch Case Statement:

Switch case is also similar to if else case but only difference is that the way of writing.We can also say that switch case is similar to if else .

Let's see the below example with the help of both i.e. if else and switch case.

Example with if else :

<script>


        var phone = "iPhone";

        if (phone === "Samsung") {
            console.log("I own a Samsung");
        } else if (phone === "iPhone") {
            console.log("I own a iPhone");
        } else if (phone === "Nokia") {
            console.log("I own a Nokia");
        } else if (phone === "Motorola") {
            console.log("I own a Motorola");
        } else if (phone === "Pixel") {
            console.log("I own a Pixel");
        } else {
            console.log("I don't own a Phone");
        }


        // Outout : I own a iPhone


    </script>

I hope you understand the above basic example of if else. Now try to print same code with the help of switch case :

<script>


        var phone = "iPhone";

        switch (phone) {
            case "Samsung":
                console.log("I own a Samsung");
                break;
            case "iPhone":
                console.log("I own a iPhone");
                break;
            case "Nokia":
                console.log("I own a Nokia");
                break;
            case "Motorola":
                console.log("I own a Motorola");
                break;
            case "Pixel":
                console.log("I own a Pixel");
                break;
            default:
                console.log("I don't own a Phone");
                break;
        }

        // Output : I own a iPhone

    </script>

Let's udnerstabd this code. First,We have declared a variable phone and initialize the value iPhone. Then, we used the switch (){....} case. Inside the (), we have store our variable phone and curently, the value of phone variable is iPhone.

So after that it will check every case that contain iPhone. In simple way,it will check the value of phone variable which iPhone in every case.

First case is Samsung. So Does our variable value contain here ? No, definately not. Therefore, it won't print Samsung case i.e. whatever written inside the Samsung case.

Our Second case is iPhone. Does our variable value contain here ? Yes... so It'll immediately start printing the code inside the iPhone case.

Whats about the remaining case i.e. Nokia, Motorola,Pixel ?

As you know that we have got our case in second case.Therefore it won't move forward. Simple meaning is that case Nokia, Motorola, Pixel won't run.

I hope so far you must have understood about it. But just last one more thing about switch case.

Why we have written default at the bottom ?

As we have noticed that we have got our result only after checking case-2 which is iPhone. But what if we don't receive our output even after checking all the cases.

Here case default comes to the crease. If our case don't match with any mentioned cases, then it'll move to the default case. It prints I don't own a Phone .

To check this, let's change the value of variable which is iPhone to something else. For ex:

var phone = "Lenovo";

Does our case contain Lenovo ?

case "Samsung":
                console.log("I own a Samsung");
                break;
case "iPhone":
                console.log("I own a iPhone");
                break;
case "Nokia":
                console.log("I own a Nokia");
                break;
case "Motorola":
                console.log("I own a Motorola");
                break;
case "Pixel":
                console.log("I own a Pixel");
                break;
default:
                console.log("I don't own a Phone");
                break;

We have Samsung,iPhone,Nokia,Motorola,Pixel and default case but don't have Lenovo case. Therefore, it'll print code inside the default which is I don't own a Phone

Now I bet you that you must have understood about the all the conditional statements which i explained you here. Our next article will be on Loops. So untill then B-Bye and keep learning JavaScript :).