DEV Community

Cover image for Conditional Branching in JavaScript: `if`, `else`, and `?`
codenextgen
codenextgen

Posted on

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
}

Enter fullscreen mode Exit fullscreen mode

Example:

let age = 18;

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

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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
}

Enter fullscreen mode Exit fullscreen mode

Example:

let age = 15;

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

Enter fullscreen mode Exit fullscreen mode

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
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Conditional Operator ?

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

Syntax:

condition ? exprIfTrue : exprIfFalse;

Enter fullscreen mode Exit fullscreen mode

Example:

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)