Tutorials Tonight's Logo
Follow Us

JAVASCRIPT IF ELSE


In this tutorial, you will learn about JavaScript if-else statements. Where it is used and how many types of these statements are?

While writing code there are many situations when you need to make a decision and decide what to do if a certain thing happens. For example, if today is Sunday then print "its holiday", if the string length is greater than 20 then alert a message else call some function, etc.

To perform such tasks you can use conditional statements in your code, and the magic to take a decision is in your hand.


Conditional Statements

Conditional statements are those statements in which there is some decision to be taken and then perform further tasks. While writing code we often face a similar situation where we make a decision for a block of code to be executed when certain conditions satisfy.

JavaScript provides the following conditional statements:

  1. if statement - if statement is used to execute a block of code only when a given condition is true.
  2. else statement - else statement is used to execute a block of code only when a given condition is false.
  3. else if statement - else-if statement is used specify a new condition to check if the previous condition was false.
  4. switch statement - switch statement is a shorter and cleaner way to use when there are many conditions to be checked and it works the same as an if-else statement.

1. JavaScript if statement

if statement is the most basic conditional statement. It executes a block of code only when the given condition is true, if the condition is false then execution leaves the block and jumps to the next section.

Here is a flow diagram that shows how the if statements execute their block of code.

javascript if statement flowchart

You can see in the first code execution checks the condition if the condition is true then it enters in the if block and executes the code if the condition is false then statement after if block is executed.

if statement syntax

if (condition) {
  // execute this block if the condition is true
}

Here is an example which checks some condition and results in some output if the condition is true.

let x = 10;
if (x > 5) {
  console.log("Statement is true, x = 10");
}
▶ Try it

In the above example condition, x==10 is true so it executes the statement inside the if block.

Possible mistake: While checking condition don't use assignment operator i.e. if (x = y) is correct while if (x == y) is correct.

It is not necessary to give some statement as a condition, you can directly specify true or false in the place of condition. If it is true then code will always execute.

if (true) {
  console.log("Condition is true. Block executed!");
}

if statement multiple conditions

The if statement accepts multiple conditions, which means you can specify more than 1 condition separated by logical operators.

The following example checks if the number is between 10 and 20 using multiple conditions.

Example 1

let a = 15;
if (a > 10 && a < 20) {
  console.log("Yes 'a' is between 10 and 20.");
}

The following example checks if the number is between 10 and 20 or is divisible by 5 using multiple conditions.

Example 2

let a = 15;
let b = 5;
if (a % 5 == 0 || a > 10 && a < 20) {
  console.log("Yes 'a' is between 10 and 20 or is divisible by 5.");
}
if (b % 5 == 0 || b > 10 && b < 20) {
  console.log("Yes 'b' is not between 10 and 20 but is divisible by 5.");
}

If there is only 1 line of code in the block of the if statement then you may emit the curly braces and can write the code within the same line.

Example: if statement in one line

if (true) console.log("Condition is true");

2. else statement JavaScript

Using an else statement you can specify a code block that is executed when the if the condition becomes false.

else statement can't be used alone it must be used after the if statement.

Here is a flow diagram for else statements working.

if-else condition flow diagram

You can see from the above image that if the condition becomes false then code execution jumps to a different block which is an else block.

else statement syntax

if (condition) {
  // executes this block if the condition is true
}
else {
  // executes this block if the condition is false
}

In the example below condition is false so it executes the else block.

var a = 15;
if (a == 10) {
  console.log("True, a = 10");
}
else {
  console.log("False, a is not equal to 10");
}
▶ Try it

3. else if statement JavaScript

The else if statement is used when we want to check another condition if the first condition is false. It is used after any if statement.

The if-else statement is used to execute a block of code among 2 alternatives while else if statement gives other alternatives to it.

else if syntax

if (condition) {
  // execute this block if the condition is true...
}
else if (condition) {
  // execute this block if the condition is true...
}
else if (condition) {
  // execute this block if the condition is true...
}
else {
  // if all false execute this block
}

The syntax above may look complicated in the first view but is just a series of if, else if, and else statement.

else if statement flow diagram

The following image explains how the else if statement is executed.

else-if condition flow diagram

You can see in the above image when the condition is false in the if statement then it jumps to next else if statement, if again its condition is false then execution jumps to next else if statement.

Here is an example to check what day is today.

let today = new Date().getDay();

if (today == 0) {
  console.log("Sunday!");
}
else if (today == 1) {
  console.log("Monday!");
}
else if (today == 2) {
  console.log("Tuesday!");
}
else if (today == 3) {
  console.log("Wednesday!");
}
else if (today == 4) {
  console.log("Thursday!");
}
else if (today == 5) {
  console.log("Friday!");
}
else {
  console.log("Saturday!");
}
▶ Try it

4. switch statement

switch statement is a collection of many conditions in a more ordered manner that work exactly as if statement. We will study switch statements in detail in the coming section.

Let's see how you will write the above example using the switch statement.

let today = new Date().getDay();
switch (today) {
  case 0:
    console.log("Sunday!");
    break;
  case 1:
    console.log("Monday!");
    break;
  case 2:
    console.log("Tuesday!");
    break;
  case 3:
    console.log("Wednesday!");
    break;
  case 4:
    console.log("Thursday!");
    break;
  case 5:
    console.log("Friday!");
    break;
  case 6:
    console.log("Saturday!");
    break;
}

Nested if statements JavaScript

The conditional statements can be nested to each other. This means you can write an if statement within another if statement.

Here is an example that clearly explains how you can use nested if-else.

let employee = {
  name: "herry",
  age: 32,
  experience: 6
}

if (employee.age > 30) {
  if (employee.experience > 5) {
    console.log("Eligible!");
  }
  else {
    console.log("Not eligible!");
  }
}
else {
  if (employee.experience > 3) {
    console.log("Eligible!");
  }
  else {
    console.log("Not eligible!");
  }
}

Conclusion

In this section, you learned how to make decisions in javascript in different cases. You looked at four different types of conditional statements in JavaScript.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.