3.4.4 Conditional Statement

This topic explains how conditional statements in JavaScript allow a program to make decisions and choose between different paths based on specified conditions.

Definition

Conditional Statement: A conditional or selection statement is an essential part of the program where amongst choices, the program chooses on the basis of some constraint. Applying an 'if' statement before one or more lines of code on the basis of some condition is met makes a typical selection scenario. That is, if the condition is met, then those line(s) will be executed, otherwise skipped.

Core Concept

Conditional statements are like a fork in the road. When you're driving and reach a fork, you must decide which path to take based on your destination. Similarly, a program uses conditional statements to decide which path of code to execute based on a condition. If it's raining, take an umbrella; otherwise, don't. In programming, if the age is greater than 3, grant admission; otherwise, deny it. This is how programs make decisions.

Detailed Explanation

Comparison Operators

To check the condition, JavaScript provides a set of comparison operators to be used for evaluating the condition.

The `if` Statement

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

Syntax: ```javascript if (condition) { // code to execute if condition is true } ```

Example: The admission office of a Montessori school checks the age of a child. If the kid is at least 4 years old, then admission is granted.

```html <html> <body> <script type="text/javascript"> var kid_age = 5; if(kid_age > 3) { document.write("<b> Admission Granted !!! </b>"); } </script> </body> </html> ```

Output: Admission Granted !!!

• `kid<sub>a</sub>ge = 5` is the variable.
• `if(kid_age > 3)` checks if the age is greater than 3.
• If true, the code inside the braces `{ }` is executed.
• If false, the code is skipped.

The `if-else` Statement

A better notion is to align both scenarios—if the condition is met and if it is not. This is achieved using an `if-else` statement. This way, either of the two situations will definitely happen.

Syntax: ```javascript if (condition) { // code if condition is true } else { // code if condition is false } ```

Example: ```html <html> <body> <script type="text/javascript"> var kid_age = 3; if(kid_age > 3) { document.write("<b> Admission Granted !!! </b>"); } else { document.write("<b> Age Requirement is not met !!! </b>"); } </script> </body> </html> ```

Output: Age Requirement is not met !!!

• `kid<sub>a</sub>ge = 3` is the variable.
• `if(kid_age > 3)` checks if the age is greater than 3.
• Since 3 is not greater than 3, the condition is false.
• The `else` block is executed, displaying "Age Requirement is not met !!!".

The `if-else if-else` Statement

There are scenarios where more than two possibilities exist. For that reason, we can modify our selection statement to be an `if-else if-else` statement. This way, the set of conditions apply, first with `if` and thereafter with `else if` statements. For any other condition that has not been catered for, `else` will take care of it.

Syntax: ```javascript if (condition1) { // code if condition1 is true } else if (condition2) { // code if condition2 is true } else if (condition3) { // code if condition3 is true } else { // code if none of the above conditions are true } ```

Example: ```html <html> <body> <script type="text/javascript"> var kid_age = 3; if(kid_age > 3) { document.write("<b> Admission Granted in Nursery Class !!! </b>"); } else if(kid_age > 4) { document.write("<b> Admission Granted in KG Class !!! </b>"); } else if(kid_age > 6) { document.write("<b> Admission Should be taken in Primary School !!! </b>"); } else { document.write("<b> Kid is Underage !!! </b>"); } </script> </body> </html> ```

Output: Kid is Underage !!!

• `kid<sub>a</sub>ge = 3` is the variable.
• First condition: `kid_age > 3`? No (3 is not greater than 3).
• Second condition: `kid_age > 4`? No (3 is not greater than 4).
• Third condition: `kid_age > 6`? No (3 is not greater than 6).
• None of the conditions are true, so the `else` block executes: "Kid is Underage !!!".

Activity: Grade Calculator

Take a number as input from the user and write a program to calculate the grade of the student in a particular subject.

Hint: ```javascript var marks = prompt("Enter marks:"); if (marks >= 90) { document.write("Grade: A+"); } else if (marks >= 80) { document.write("Grade: A-"); } else if (marks >= 70) { document.write("Grade: B"); } else if (marks >= 60) { document.write("Grade: C"); } else if (marks >= 50) { document.write("Grade: D"); } else { document.write("Grade: F"); } ```

Intermediate Level

Conditional statements control the flow of a program based on conditions. JavaScript provides comparison operators (`>`, `<`, `>=`, `<=`, `==`, `!=`) to evaluate conditions. The `if` statement executes code only if the condition is true. The `if-else` statement provides an alternative path when the condition is false. The `if-else if-else` statement handles multiple conditions, checking each `else if` in order until one is true, with `else` as the default. These statements are essential for decision-making in programs, such as grading students, validating input, or controlling game logic.

Important Points

• - Conditional statements = decision-making in programs.
• - `if`: executes code if condition is true.
• - `if-else`: provides alternative if condition is false.
• - `if-else if-else`: handles multiple conditions.
• - Comparison operators: `>`, `<`, `>=`, `<=`, `==`, `!=`.
• - Conditions are evaluated in order; first true condition wins.
• - `else` is the default when no condition is true.
• - Activity: Grade calculator using `if-else if-else`.

Remember

• - `if`: One condition.
• - `if-else`: Two paths.
• - `if-else if-else`: Multiple paths.
• - Comparison Operators: `>`, `<`, `>=`, `<=`, `==`, `!=`.
• - Order: Conditions checked top to bottom.
• - `else`: Default (no condition true).
• - Grade Example: `>=90` A+, `>=80` A-, etc.

Common Mistakes

• - Using `=` instead of `==`: `=` assigns; `==` compares.
• - Forgetting braces `{ }`: Braces define the block of code.
• - Order of conditions: More specific conditions should come first.
• - Confusing `==` and `===`: `==` checks value; `===` checks value and type.
• - Missing `else`: Without `else`, no action is taken if condition is false.
• - String vs number comparison: `"5" > 3` is true due to type coercion.

Quick Revision

Conditional statements allow a program to make decisions. The `if` statement executes code if a condition is true. The `if-else` statement provides an alternative when the condition is false. The `if-else if-else` statement handles multiple conditions, checking each in order, with `else` as the default. Comparison operators (`>`, `<`, `>=`, `<=`, `==`, `!=`) are used to evaluate conditions. Conditional statements are essential for decision-making, such as grading students or validating input.

60-Second Revision

• `if`: Condition true → execute.
• `if-else`: True → if; False → else.
• `if-else if-else`: Multiple conditions.
• Operators: `>`, `<`, `>=`, `<=`, `==`, `!=`.
• Order: Top to bottom.
• `else`: Default.