Conditional Statements in JavaScript

Conditional statements in JavaScript allow you to perform different actions based on different conditions. They are fundamental in controlling the flow of a program, making decisions, and responding to various inputs. Here's a detailed breakdown:

1. if Statement

The if statement executes a block of code if a specified condition is true.

 

Syntax

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

 

ifCondition.js

let x = 10;

if (x > 5) {
  console.log(`x is greater than than 5, x : ${x}`)
}

if (x < 5) {
  console.log(`x is less than than 5, x : ${x}`)
}

Output

x is greater than than 5, x : 10

In this example, the message " x is greater than than 5, x : 10" will be printed because the condition x > 5 is true.

 

2. else Statement

The else statement executes a block of code if the condition in the if statement is false.

 

Syntax

if (condition) {
  // code to be executed if the condition is true
} else {
  // code to be executed if the condition is false
}

ifElse.js

let x = 3;

console.log(`x = ${x}`);

if (x > 5) {
  console.log("x is greater than 5");
} else {
  console.log("x is not greater than 5");
}

Output

x = 3
x is not greater than 5

Here, the message "x is not greater than 5" will be printed because x > 5 is false.

 

3. else if Statement

The else if statement specifies a new condition to test if the first condition is false.

 

Syntax

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition1 is false and condition2 is true
} else if (condition3) {
  // code to be executed if condition2 is false and condition3 is true
}else {
  // code to be executed if condition1 and condition2 are both false
}

ifElseIf.js

let x = 10;

console.log(`x : ${x}`);

if (x > 15) {
  console.log("x is greater than 15");
} else if (x > 5) {
  console.log("x is greater than 5 but less than or equal to 15");
} else {
  console.log("x is 5 or less");
}

Output

x : 10
x is greater than 5 but less than or equal to 15

In this case, "x is greater than 5 but less than or equal to 15" is printed because the first condition is false, but the second condition is true.

 

4. switch Statement

The switch statement is used to perform different actions based on different possible values of an expression. It’s an alternative to multiple else if statements.

 

Syntax

switch(expression) {
  case value1:
    // code to be executed if expression === value1
    break;
  case value2:
    // code to be executed if expression === value2
    break;
  // additional cases...
  default:
    // code to be executed if none of the above cases match
}

switchDemo.js

let color = "red";

console.log(`Color: ${color}`);

switch(color) {
  case "blue":
    console.log("Color is blue");
    break;
  case "red":
    console.log("Color is red");
    break;
  case "green":
    console.log("Color is green");
    break;
  default:
    console.log("Color is not blue, red, or green");
}

Output

Color: red
Color is red

This will print "Color is red" because the color variable matches the "red" case.

 

5. Ternary Operator (?:)

The ternary operator is a shorthand for the if-else statement.

 

Syntax

condition ? expressionIfTrue : expressionIfFalse

ternary.js

let age = 18;

console.log(`age: ${age}`);

let canVote = age >= 18 ? "Yes, you can vote" : "No, you cannot vote";

console.log(canVote);

Output

age: 18
Yes, you can vote

This will print "Yes, you can vote" because age >= 18 is true.

 

6. Nested Conditional Statements

You can nest conditional statements within each other to handle more complex logic.

 

nestedConditionalStatement.js

let score = 85;

console.log(`Score: ${score}`);

if (score >= 90) {
  console.log("Grade: A");
} else {
  if (score >= 80) {
    console.log("Grade: B");
  } else {
    if (score >= 70) {
      console.log("Grade: C");
    } else {
      console.log("Grade: D or below");
    }
  }
}

Output

Score: 85
Grade: B

8. switch with Multiple Cases

You can group multiple cases together if they should execute the same code.

 

switchMultiCase.js

let day = 3;

switch(day) {
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:
    console.log("It's a weekday");
    break;
  default:
    console.log("It's the weekend!");
}

Output

It's a weekday

 

Previous                                                    Next                                                    Home