JS Conditional

JavaScript Conditional Statements

Conditional statements in JavaScript allow you to make decisions in your code. They help your program choose between different actions based on whether a certain condition is true or false.

In simple terms, it’s like asking a question. If the answer is "yes," the program does one thing. If the answer is "no," it does something else.

For example:

• If it is raining, then take an umbrella.
• If it is not raining, then go outside without an umbrella.

There are various types of conditional statements in JavaScript:

• if statement
• if-else statement
• if-else-if ladder statement

1. JavaScript if Statement

An if statement is used to check a condition. If the condition is true, the code inside the if block will run. If the condition is false, the code will be skipped.

if Statement Syntax

if (condition) {
    // code for execution
}

Scenario 1: Write a JavaScript program that checks if a person is eligible to create a bank account based on their age. If the age is greater than or equal to 18, it should print "You can create your BankAccount" in the console.

let age = 20;
if (age >= 18) {
    console.log("You can create your BankAccount");
}

if Statement Explanation

• let age = 20; - This line creates a variable named age and assigns it the value 20. In this case, it means the person is 20 years old.
• if (age >= 18) - This is an if statement, which checks a condition. The condition being checked here is whether the value of age is greater than or equal to 18.
  • If the condition is true (meaning the person is 18 or older), the code inside the curly brackets { } will be executed.
  • If the condition is false (meaning the person is younger than 18), nothing will happen, and the code inside the { } will be skipped.
• console.log("You can create your BankAccount"); - This line is inside the if block. If the condition is true (i.e., the person’s age is 18 or older), this code will run and print the message to the console.

2. JavaScript if-else Statement

An if-else statement provides an alternative action when the condition is false. It consists of an if block and an else block.

if-else Statement Syntax

if (condition) {
     // code for execution
} else {
    // code execution if a condition is false
}

Scenario 2: Write a JavaScript program that checks if a person is eligible to create a bank account based on their age. The program should print a different message if the person is under 18.

let age = 11;
if (age >= 18) {
    console.log("You can create your BankAccount");
} else {
    console.log("You can't create your BankAccount, your age is less than 18");
}

if-else Statement Explanation

• let age = 11; - This line creates a variable named age and assigns it the value 11.
• if (age >= 18) { ... } - Checks whether the age is greater than or equal to 18. If true, the code inside the first { } executes.
• else { ... } - If the if condition is false (i.e., the person is younger than 18), the code inside the else block will be executed instead.
• console.log("You can't create your BankAccount..."); - Since the person is younger than 18, this message will be printed to the console.

3. JavaScript if-else-if Ladder Statement

An if-else-if ladder statement allows you to check multiple conditions in sequence. It helps to make more complex decisions by testing several possibilities.

if-else-if Ladder Syntax

if (condition1) {
    // code for execution
} else if (condition2) {
    // code for execution if first condition is false
} else {
    // default code execution if all conditions are false
}

Scenario 3: Write a JavaScript program that categorizes a person as a Senior Citizen, eligible to create a bank account, or too young to create a bank account using the if-else ladder statement.

let age = 30;
if (age >= 60) {
    console.log("You are a Senior Citizen.");
} else if (age >= 18) {
    console.log("You can create your BankAccount.");
} else {
    console.log("You can't create your BankAccount. Your age is less than 18.");
}

if-else-if Ladder Explanation

• let age = 30; - Creates a variable named age and assigns it 30.
• if (age >= 60) - The first condition checks if the person’s age is 60 or older. If true, it runs the block and stops.
• else if (age >= 18) - If the first condition is false, it moves here and checks if the age is greater than or equal to 18. If true, it runs this block.
• else - If all preceding conditions are false, the default else block runs.

4. JavaScript Conditional Operator (? :)

The conditional operator (often called the ternary operator) first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation.

Conditional Operator Syntax

condition ? valueX : valueY

If the condition is true, then the result is valueX. Otherwise, the result is valueY.

let a = 10;
let b = 20;

console.log("((a > b) ? 100 : 200) => " + ((a > b) ? 100 : 200));
console.log("((a < b) ? 100 : 200) => " + ((a < b) ? 100 : 200));

5. The switch Statement

Use the switch statement to specify many alternative blocks of code to be executed. It provides a more elegant way to handle multiple if-else-if conditions by evaluating an expression and executing code blocks based on a matching case.

switch Statement Syntax

switch(expression) {
  case value1:
    // code block to be executed if expression matches value1
    break;
  case value2:
    // code block to be executed if expression matches value2
    break;
  default:
    // code block to be executed if expression doesn't match any case
}

How It Works

• The switch expression is evaluated once.
• The value of the expression is compared with the values of each case.
• If there is a match, the associated block of code is executed.
• The break keyword stops the execution inside the switch block. If omitted, the next case will be executed as well ("fall-through").
• The default keyword specifies the code to run if there is no case match. It is optional.

let dayNumber = 3;
let dayName;

switch (dayNumber) {
  case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  default:
    dayName = "Invalid day";
}
console.log("The day is " + dayName);