Conditional Basics: Using If Statements in JavaScript

Paul Halliday

Should we go out to eat tonight? The answer to this question is usually a yes or no answer (depending on who you ask… :)). Welcome to the world of conditionals! Let’s explore how conditionals work in JavaScript.

If you’re already an experienced developer or have played around with JavaScript for any length of time, this will probably already be second nature to you, but otherwise this is perfect if you’re just getting started. Plus, sometimes we just draw a blank and need a refresher on the syntax. This article will be perfect for both scenarios!

If

Conditionals allow us to perform an action if something is true or false. Let’s take the following example:

const areWeGoingOutForFood = true

if (areWeGoingOutForFood) {
  console.log(`Yay! I want Chinese food.`)
}

As our areWeGoingOutForFood variable is true, the message Yay! I want Chinese food. is logged to the console.

Else Block

What happens if we don’t want to go out? Well. We haven’t considered that yet. Let’s do so:

const areWeGoingOutForFood = false;

if (areWeGoingOutForFood) {
  console.log(`Yay! I want Chinese food.`);
} else {
  console.log(`I'd prefer to eat in tonight too.`);
}

The addition of the optional else block means that if we aren’t eating out tonight (i.e. the conditional is false), anything in this else block will be ran.

Multiple Conditional Statements with Else If

We can use multiple if/else statements in our code to switch between behavior states:

// According to https://nationalzoo.si.edu/animals/american-alligator - alligators have from 74 - 80 teeth!
const teeth = 74;

const promptForGuess = () => {
  const guess = prompt('How many teeth do alligators have?');

  if (guess <= 0) {
    alert(`It's definitely above zero!`);
    promptForGuess();
  } else if (guess >= 1 && guess <= 39) {
    alert(`Quite a bit higher than that!`);
    promptForGuess();
  } else if (guess >= 40 && guess <= 73) {
    alert(`Getting closer. It's a little higher!`);
    promptForGuess();
  } else if (guess >= teeth && guess <= 80) {
    alert(`Yup. That sounds about right.`);
  } else {
    alert(`Too many. Try lower than that.`);
    promptForGuess();
  }
};

promptForGuess();

When we run our project, it’ll prompt the user asking for an approximation on how many teeth an alligator has. As the user answers the question, feedback is given in the form of an alert which changes text based on how close the user was.

Our implementation is quite arbitrary, but this can be implemented in any way that you see fit. And when the number of conditions continues growing, you may want to consider using a switch statement instead.

Ternary Operator

The ternary operator can be thought of as a shortcut to the standard if statement. It takes a form similar to what we’ve already learned, but significantly more terse. Let’s visualize it:

const areWeGoingOutForFood = false;

areWeGoingOutForFood ?
  console.log(`Yay! I want Chinese food.`) :
  console.log(`I'd prefer to eat in tonight too.`)

// Result: console.log(`I'd prefer to eat in tonight too.`)

What’s happening here? Well, firstly, we’re asking whether areWeGoingOutForFood is true. Then, it follows the “TRUE : FALSE” denomination. As areWeGoingOutForFood is equal to false, the second statement is executed. Note how we’re using the colon : to separate the two statements.

Challenge: Based on the above example, what would happen if areWeGoingOutForFood was equal to true?

While it’s also possible to nest ternary conditions, I wouldn’t advise this as it tends to impair code readability and the logic gets hard to follow.

Alright, so now you know how to write conditional statements in JavaScript, which is one of the fundamental concepts to grasp! Go you! 👍

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#