If vs Ternary vs Switch-Case for conditionals
Published: 2020-05-12 19:46:48

<!-- wp:paragraph -->
<p>Conditionals are programming structures that determine the flow of the program based on an evaluation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In most C-style languages, such as JavaScript, there are multiple ways of handling conditional logic.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article, I'll discuss the <code>if-else</code>, ternary operator, <code>?</code>  and <code>switch-case</code> and how I decide which to use for different situations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Whenever I write code that will need to be maintained either by myself or someone else, I like to consider the <em>developer experience</em> of that code.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Will I (or the eventual maintained) easily be able to grasp the purpose of the code? Am I likely to misunderstand what the code actually does? Does the code significantly deviate from expected affordance?</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>If-Else vs Ternary</h2>
<!-- /wp:heading -->

<!-- wp:preformatted -->
<pre class="javascript wp-block-preformatted">let isEvenOrOdd = number =&gt; {
    if(number % 2 == 0){
        return "Is Even"
    }
    else {
        return "Is Odd"
    }
}</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>For scenarios with this-or-that (only two possible) outcomes, I prefer to use a ternary because it's less code for the maintainer to parse. In a large project, those could be a lot of lines saved.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">let isEvenOrOdd = number =&gt; {
    return number % 2 == 0 ? 
        "Is Even" : "Is Odd"
}</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>However, for more complex conditionals  we may need <code>else if</code>s </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, a conditional with three possible options.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">let meal = null
if(time == "morning") {
    meal = "breakfast"
} else if(time == "afternoon") {
    meal = "lunch"
} else {
    meal = "dinner"
}</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>We could handle this case with a ternary operator(s) as well.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">let meal = null
time == "morning" ?
    meal = "breakfast"
    :
    time == "afternoon" ?
        meal = "lunch"
        :
        meal = "dinner"</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>Of course, despite looking fancier than ordinary If-Elses, this is probably less readable than the previous example.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's switch this up a bit.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Switch Statements</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Switch Statements allow us to evaluate several cases against a single expression. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Our meal example from above would be represented thus:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">let meal = null
switch(time) {
    case "morning":
        meal = "breakfast"
        break
    case "afternoon":
        meal = "lunch"
        break
    default:
        meal = "dinner"
}</pre>
<!-- /wp:preformatted -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Switch statements are versatile and could provide a more readable alternative to If-Elses and ternary operators.</p>
<!-- /wp:paragraph -->