We make decisions all the time "Should I learn DSA" or "Should I learn web development", Conditional statement allows representing such decision-making in JavaScript. Conditional Statements are used to perform different actions based on different conditions. In this article, we are going learn about different conditional operators available in JavaScript.

if... else

// Syntax

if (condition) {
  // code to be executed when the condition is evaluated to truthy value
} else {
  // code to be executed when the condition is falsy value
}

if...else statement is used when we want to execute different codes based on truthy and falsy values. If the condition is a truthy value then the if block code will be executed and if the condition is a falsy value the else block code will be executed.

Let's take a look at an example

let age = 18;

if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("You can't vote right now.");
}

// Output
// You can vote

In the above code example the condition i.e age >= 18 evaluates to truthy value so the if block code is executed and it displays You can vote message in the console.

Let's take a look at another example

let age = 16;

if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("You can't vote right now.");
}

// Output
// You can't vote right now.

In the above example, I have changed the age value from 18 to 16 so the condition i.e age >= 18 evaluates to false, so the else block of code is executed and it displays the You can't vote right now message to the console.

Truthy and falsy value

In JavaScript, a truthy value is a value that is considered true when evaluated in a Boolean context. Examples of truthy values include any non-zero number, any non-empty string, and any object.

A falsy value, on the other hand, is a value that is considered false when evaluated in a Boolean context. Examples of falsy values include 0, the empty string, null, undefined, NaN, and the special keyword 'false'.

It's important to note that the only falsy values in javascript are: false, 0, "", null, undefined, and NaN. All other values are truthy.

else if

else if statement is used when we want to test for multiple conditions. Let's take a look at the example below to understand it better.

let age = 16;

if (age >= 18) {
  console.log("You can vote");
} else if (age >= 16) {
  console.log("You are eligible for Driving License");
} else {
  console.log("You can't vote right now.");
}

In the above example the condition next to the if statement evaluates to a falsy value, so the if block code is not executed, then the compiler moves to else if the condition next to else if evaluates to true, so the else if block of code is executed.

Switch Statement

When we have multiple if checks in our code, then we can use the Switch statement to replace multiple if checks.

// Syntax

switch (x) {
  case "value1":
    //   code to be executed
    break;
  case "value2": // if (x === 'value2')
    //   code to be executed
    break;

  default:
    //   code to be executed
    break;
}

In the above example, the value of x is checked with the value of different cases, once the value of x is strictly equal to any one of the different cases, the code block of that case is executed until it encounters the next break statement. If none of the cases is matched then the default block of code is Exected. Notice the break keyword, break keyword is used so that code execution stops and no new cases are checked, the compiler moves on and starts executing any code that appears after the switch statement.

Example.

let color = "green";

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

// Output

// The color is green.

Ternary Operator

Ternary Operator takes three operands and returns values based on the condition.

Syntax:

condition ? expression 1 : expression2

• if the condition is true then it returns expression1 and if the expression if false it returns expression2

const var1 = 10;
const var2 = 20;

console.log(var2 > var1 ? "true" : "false"); // true
console.log(var1 > var2 ? "true" : "false"); // false

Conclusion 🙋‍♂️🙋‍♂️

That's it for this article for exploring more about conditionals refer to the recourses mentioned below.

• mdn docs