JavaScript Conditionals: If/Else, Switch Statements, and Best Practices

Unlocking the Power of JavaScript with Conditional Logic

Best Practice

At the heart of every application lie decisions. Conditional statements, like the familiar 'if' statement ('if the pizza delivery driver arrives, open the door'), allow programs to make choices and respond to different situations. JavaScript, along with languages like Java, offers a rich set of conditional statements to enable complex decision-making within applications.

if

An if statement starts with a condition. If it is true the statement following will happen.

if(pizzaArrives) {
  openTheDoor();
}

So if pizzaArrives is true we call the function openTheDoor. I added the braces after the if statement. This is optional but helps readability. Omitting the braces can cause you to miss bugs. So please include them!

if/else

There are times when you have two different courses of action. We can add the else statement along with the if. Say you are cooking some hamburgers.

if(sideCooked) {
  flipBurger();
} else {
  keepCooking();
}

This check can run the cooking robot at your favorite house of burgers. It might need some more code though.

If you need to check two conditions you can have an if else if too.

if(sideCooked) {
  flipBurger();
} else if(otherSideCooked) {
  removeFromGrill();
} else {
  keepCooking();
}

This gives us the option to check additional values. If you need more checks a switch statement may work better. More on that later.

Conditional Operators

The operators we use for if statements must resolve to true or false. There are quite a few options for you to use here. Speaking from experience you need to test things out and get the right one.

if(9>5) { alert("Greater than"); }// greater than
if(5<8) { alert("Less than"); } // less than
if(9>=6) { alert("Greater than equal to"); } // greater than equal to
if(4<=6) { alert("Less than equal to"); } // less than equal to
if(4!=6) { alert("Not equal to"); } // not equal to

There are also two logical operators. The Logical And(&&) and the Logical Or(||). They are used a lot but don’t be intimidated.

const value1 = 4;
const value2= -3;

console.log(value1 > 0 && value2 > 0); // Expected output: false
console.log(value1 > 0 || value2 > 0); // Expected output: true

The Logical And must have both values true to resolve as true. The Logical Or needs one to be true.

switch

Switch statements evaluate the expression to determine which statement to execute. Then it runs the code until reaching a break statement. Here is an example that tells us the price of the shoes you want.

const shoes = 'Reebok';
switch (shoes) {
  case 'Nike':
    console.log('Nike shoes are $200.');
    break;
  case 'Adidas':
  case 'Reebok':
    console.log('Adidas and Reebok are $100 a pair.');
    // Expected output: "Adidas and Reebok are $100 a pair."
    break;
  default:
    console.log(`Sorry, we don't carry ${shoes}.`);
}

This code should print “Adidas and Reebok are $100 a pair.” to the console. Switch statements can be tricky if you don’t add the break statement.

const shoes = 'Nike';
switch (shoes) {
  case 'Nike':
    console.log('Nike shoes are $200.');
  case 'Adidas':
  case 'Reebok':
    console.log('Adidas and Reebok are $100 a pair.');
    break;
  default:
    console.log(`Sorry, we don't carry ${shoes}.`);
}

Conditional statements are fundamental to programming in JavaScript and many other languages. They enable our programs to make decisions and respond to different situations. The if/else and switch statements are versatile and easy to use, providing powerful tools for controlling the flow of your code.