Conditional Branching in JavaScript: `if`, `else`, and `?`

In this blog, we'll delve into the world of conditional branching in JavaScript. We'll explore the if statement, the else clause, the else if construct, and the conditional (ternary) operator ?. By the end of this blog, you'll have a solid understanding of how to control the flow of your JavaScript programs.

The if Statement

The if statement is used to execute a block of code if a specified condition is true.

Syntax:

if (condition) {
  // code to execute if condition is true
}

Example:

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
}

Boolean Conversion

In JavaScript, any value can be converted to a boolean. The following values are considered false:

• false
• 0
• "" (empty string)
• null
• undefined
• NaN

All other values are considered true.

Example:

let value = 0;

if (value) {
  console.log("Value is true.");
} else {
  console.log("Value is false.");
}
// Output: Value is false.

The else Clause

The else clause is used to execute a block of code if the condition in the if statement is false.

Syntax:

if (condition) {
  // code to execute if condition is true
} else {
  // code to execute if condition is false
}

Example:

let age = 15;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

Several Conditions: else if

The else if construct allows you to check multiple conditions.

Syntax:

if (condition1) {
  // code to execute if condition1 is true
} else if (condition2) {
  // code to execute if condition2 is true
} else {
  // code to execute if none of the conditions are true
}

Example:

let score = 85;

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");
}

Conditional Operator ?

The conditional (ternary) operator ? is a shorthand for the if-else statement.

Syntax:

condition ? exprIfTrue : exprIfFalse;

Example:

let age = 20;
let message = age >= 18 ? "You are an adult." : "You are a minor.";
console.log(message);

Multiple ?

You can chain multiple conditional operators to handle more complex conditions.

Example:

let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
console.log("Grade:", grade);

Non-Traditional Use of ?

The conditional operator can also be used in non-traditional ways, such as assigning default values.

Example:

let userInput = "";
let result = userInput ? userInput : "Default Value";
console.log(result); // Output: Default Value

Practical Example

Let's put everything together with a practical example:

let temperature = 25;

if (temperature > 30) {
  console.log("It's hot outside!");
} else if (temperature > 20) {
  console.log("It's warm outside.");
} else if (temperature > 10) {
  console.log("It's cool outside.");
} else {
  console.log("It's cold outside.");
}

let weather = temperature > 30 ? "hot" : temperature > 20 ? "warm" : temperature > 10 ? "cool" : "cold";
console.log("The weather is:", weather);

Conclusion

Conditional branching is a fundamental concept in JavaScript that allows you to control the flow of your programs based on various conditions. By mastering the if, else, else if, and conditional operator ?, you'll be able to write more dynamic and responsive code. Keep practicing and exploring to deepen your understanding of conditional branching in JavaScript.

Stay tuned for more in-depth blogs on JavaScript! Happy coding!