DEV Community

Cover image for JavaScript Conditional Statements: A Guide to Making Decisions in Code
Richa
Richa

Posted on

JavaScript Conditional Statements: A Guide to Making Decisions in Code

Making decisions is an essential part of JavaScript programming. Conditional statements enable you to take alternative actions depending on specified conditions, allowing your code to adapt to a variety of contexts. Conditional statements are your go-to tool for logical control, whether you're developing a game, dealing with user inputs, or regulating data flow. In this blog, we'll look at the many forms of JavaScript conditional statements and how they're used.

1️⃣ if Statement

The if statement executes a piece of code if a stated condition is true.
⭐ Syntax:

if (condition) {
  // Code to execute if a condition is true
}
Enter fullscreen mode Exit fullscreen mode

📌Example:

let num = 0
if(num === 0){
    console.log('Number is zero') // Output: Number is zero
}
Enter fullscreen mode Exit fullscreen mode

2️⃣ if-else Statement

If the if statement's condition is false, the else statement provides an alternate block of code.
⭐ 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 num = -10;
if(num > 0){
    console.log('Number is positive')
}else{
    console.log('Number is negative') // Output: Number is negative
}
Enter fullscreen mode Exit fullscreen mode

3️⃣ else if Statement

The else if statement allows you to verify many conditions in sequence.
⭐ 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 num = 0;
if(num > 0){
    console.log('Number is positive') 
}else if (num <= 0){
    console.log('Number is negative') // Output: Number is negative
}else {
    console.log('Number is zero')
}
Enter fullscreen mode Exit fullscreen mode

4️⃣ switch Statement

The switch statement examines an expression and compares it to multiple case conditions.
⭐ Syntax:

switch (expression) {
  case value1:
    // Code to execute if expression matches value1
    break;
  case value2:
    // Code to execute if expression matches value2
    break;
  default:
    // Code to execute if no cases match
}
Enter fullscreen mode Exit fullscreen mode

📌Example:

const color = 'red'
switch(color){
    case 'red': 
        console.log("Color is red") // Output: Color is red
        break
    case 'blue': 
        console.log("Color is blue")
        break
    case 'green': 
        console.log("Color is green")
        break
    default:
        console.log("Not a valid color")
}
Enter fullscreen mode Exit fullscreen mode

5️⃣ Ternary Operator

The ternary operator is a shorthand for the if-else statement.
⭐ Syntax:

condition ? expressionIfTrue : expressionIfFalse;
Enter fullscreen mode Exit fullscreen mode

📌Example:

let num = 20
let result = num >= 0 ? "Number is positive" : "Number is negative";
console.log(result) // Output: Number is positive
Enter fullscreen mode Exit fullscreen mode

6️⃣ Nested if-else Statement

You can handle complicated conditions by nesting one if statement inside another.
⭐ Syntax:

if (condition1) {
  if (condition2) {
    // Code to execute if both condition1 and condition2 are true
  } else {
    // Code to execute if condition1 is true but condition2 is false
  }
} else {
  // Code to execute if condition1 is false
}
Enter fullscreen mode Exit fullscreen mode

📌Example:

let num = 20
let operation = "+";

if (num >= 0) {
  if (operation === "+") {
    console.log("Sum of number is " + (num + 100)); // Output: Sum of number is 120
  } else {
    console.log("Invalid choice");
  }
} else {
  console.log("Negative values not allowed");
}
Enter fullscreen mode Exit fullscreen mode

💡 Switch vs Nested If-Else or else-if: Choosing the Right Tool
Now, one question comes up for checking multiple test cases, which statement should we use: switch, nested if-else, or else-if? All allowed you to handle various situations. however, they were suited to specific scenarios:

  1. switch: Best for comparing multiple fixed values to a single variable. Therefore use it to make direct comparisons of a single value.
  2. nested if-else or else if: Useful when the conditions are complicated or contain several variables or expressions. Therefore use them for complex conditions or scenarios that require multiple checks. Switch vs nested if-else

Conclusion

Conditional statements are a basis of logical control in JavaScript, allowing developers to build interactive and dynamic programs. From the simplicity of the if statement to the elegance of the ternary operator, knowing these constructions will improve your coding abilities. Start experimenting with these statements to see how they might add flexibility and decision-making power to your projects.
Got any cool examples of how you’ve used conditional statements? Share them in the comments below! 🚀
Happy coding!✨

Top comments (0)