DEV Community

Vasso Vass
Vasso Vass

Posted on

Trying to work out when to use if-else, switch or conditional (tenary) operator - The importance of MDN

This is a post where I document as I learn type of thing. So if anything doesn't make sense or is wrong, let me know in the comments. Assumption is that you know that these options exist for writing conditionals.

I have just learnt switch statements and the conditional (tenary) operator which is variations on the if-else conditional statement.

So far my understanding is that the:

  1. Switch statement is used as a cleaner way for comparing 1 value to multiple options
const birthYear = 2005;
const birthYear2 = birthYear < 2000
switch (birthYear2) {
    case (birthYear2 < 2000):
        century = 20;
        postLetters = "th";
        console.log(`${century}${postLetters} century`);
    case birthYear2 > 2000:
        century = 21;
        postLetters = 'st';
        console.log(`${century}${postLetters} century`);
        console.log(`cusp of ${century}${postLetters} century`);

Enter fullscreen mode Exit fullscreen mode
  1. Conditional (tenary) operator is a simpler /more readable way of conditionally declaring variables
age = 25;

age >= 18 ? console.log('He is of legal limt') : console.log('He is not of legal limt');
Enter fullscreen mode Exit fullscreen mode
  1. If-else can be used for all of the above, just not as neat and readable example code:
const birthYear = 2995;
let century;
let postLetters;
if (birthYear < 2000) {
    century = 20;
    postLetters = "th";
} else {
    century = 21;
    postLetters = "st";
console.log(`${century}${postLetters} century`);
Enter fullscreen mode Exit fullscreen mode

My issue is that I don't quite understand exactly when and were it should apply specifically, or at least have a rough idea. So I Googled this and it led to "Switch-Case or If-Else: Which One to Pick?" which doesn't address the conditional (tenary) operator.

Some notes from this:

  • The switch statement is a multiple-choice selection statement.
  • If there are several matching cases to a case value in Javascript switch multiple cases, the first one is selected. (Taken from the comparison chart)
  • Switch statements are ideal for fixed data values.
  • if-else conditional branches are great for variable conditions that result into Boolean.
  • if-else: Having different conditions is possible.
  • Switch: We can only have one expression.
  • Switch: Sequence of execution - executes one case after another till a break statement appears or until the end of the switch statement is reached.
  • if-else: Sequence of execution - if-statement will be executed, or else-statement is executed.
  • you should use switch statements for making decisions based on single integers enumerated value, or a string object.

You can use if-else when:
The condition result is a boolean.
The conditions are complex. For example, you have conditions with multiple logical operators.

You can use a switch-case when:
There are multiple choices for an expression.
The condition is based on a predefined set of values such as enums, constants, known types. For example, error codes, statuses, states, object types, etc.
From: "Switch-Case or If-Else: Which One to Pick?"

My Takeaway from the above:

  • one condition in Switch versus multiple in if-else
  • if you can use switch statement instead of if-else, then do it.

I then checked the references used for "Switch-Case or If-Else: Which One to Pick?" and it led me to conditionals of MDN

  • if-else: mainly good for cases where you've got a couple of choices, and each one requires a reasonable amount of code to be run, and/or the conditions are complex (for example, multiple logical operators).
  • switch: where you just want to set a variable to a certain choice of value or print out a particular statement depending on a condition

  • Summary of Switch statement: they take a single expression/value as an input, and then look through a number of choices until they find one that matches that value, executing the corresponding code that goes along with it.

  • Summary: The ternary or conditional operator is a small bit of syntax that tests a condition and returns one value/expression if it is true, and another if it is false — this can be useful in some situations, and can take up a lot less code than an if...else block if you have two choices that are chosen between via a true/false condition. ternary operator is not just for setting variable values; you can also run functions, or lines of code — anything you like

Basically, I should have gone to the MDN docs from the get go. It has examples, explanations and all that jazz🎶

Top comments (0)