2 Useful Tips about JavaScript Conditionals

Just a quick post, inspired by Laura Kalbag's post, which included this gem:

We shouldn't be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been 'around for ages', you'll likely be saying something new to someone.

One: There is no else if

When you write something like this ...

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else if ( msg === 'Yo' ) {
    console.log('Yo dawg');
  }
}

... then what you're actually writing is this ...

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else {
    if ( msg === 'Yo' ) {
      console.log('Yo dawg');
    }
  }
}

That's because there is no else if in JavaScript. You know how you can write an if statement without any curly braces?

if ( foo ) bar() // please don't do this if you want your code to be legible

You're doing the same thing with the else part of the initial if statement when you write else if: you're skipping the curly braces for the second if block, the one you're providing to else. There's nothing wrong with else if per se, but it's worth knowing about what's actually happening.

Two: return Means Never Having to Say else

Consider some code like this:

function howBig( num ) {
  if ( num < 10 ) {
    return 'small';
  } else if ( num >= 10 && num < 100 ) {
    return 'medium';
  } else if ( num >= 100 ) {
    return 'big';
  }
}

If the number we pass to howBig is less than 10, then our function will return 'small'. As soon as it returns, none of the rest of the function will run – this means we can skip the else part entirely, which means our JavaScript code could look like this:

function howBig( num ) {
  if ( num < 10 ) {
    return 'small';
  }

  if ( num < 100 ) {
    return 'medium';
  }

  if ( num >= 100 ) {
    return 'big';
  }
}

But wait – if the first if statement isn't true, and the second if statement isn't true, then we will always return 'big'. That means the third if statement isn't even required:

function howBig( num ) {
  if ( num < 10 ) {
    return 'small';
  }

  if ( num < 100 ) {
    return 'medium';
  }

  return 'big';
}

From