3 minutes read

Until now, we have only considered programs that execute commands line by line. But in factual programming, they may look like a crossroads:

Image of an abstract crossroad

We sometimes find ourselves at a crossroads where our path diverges. This happens in programming, too — programs may split. In these cases, we use conditional operators.

If

Often, we need to make a decision based on some conditions. This concept is mainly done with the statement's help in programming and JavaScript. It's called a conditional operator. For example, you have a cat that meows when it gets hungry after 6 am. We come up with the statement:

function meow() {
  return "Meow!";
}

let time = 10;
let sound;

if (time >= 6) {
  sound = meow();
  console.log(sound);
}

The function meow() describes what the cat does after 6 am.

Note that when we work with the if statement, the condition inside the parentheses is converted to a boolean. The code inside if is executed if the boolean is true. So, every boolean could be a condition:

let condition = true; 

if (condition) {
  console.log("True!");
}

Else

When the condition is false, the else block can be used instead of if. For example:

function meow() {
  return "Meow!";
}

function sleep() {
  return "Zzzzz...";
}

let time = 5;
let sound;

if (time >= 6) {
  sound = meow();
} else {
  sound = sleep();
}
console.log(sound);

Our cat meows at 6 am or later and sleeps otherwise.

Else if

Sometimes, we encounter scenarios where we are faced with more than two potential conditions to consider. For this purpose, we use the else if block:

function meow() {
  return "Meow!";
}

function sleep() {
  return "Zzzzz...";
}

function play() {
  return "Bang bang!";
}

let time = 9;
let sound;

if (time < 6) {
  sound = sleep();
} else if (time < 8) {
  sound = meow();
} else {
  sound = play();
}
console.log(sound);

We are considering three different scenarios for the cat's behavior. If it is before 6 am, the cat sleeps. Suppose it is between 6 and 8 am, and the cat meows. Otherwise, the cat plays. We have created three functions to represent each of these sounds. What sound will the cat make in the given situation?

Ternary operator

When the program aims to assign a variable depending on a condition, we can use the short version of the if...else block: the ternary operator ? : . It works like this:

let time = 11;
let isHungry = (time >= 6) ? true : false;

In the example, you can see the condition. Then, ? and two possible values of the set variable: first, what we set when the condition is true, and after : comes whatever we set for false. A condition for visibility can be placed in parentheses, but this action is unnecessary. The same code, but without parentheses, will be executed in the same way:

let time = 11;
let isHungry = time >= 6 ? true : false;

The condition can be as simple as in the example above or more complex. For instance, by using logical operators:

let time = 11;
let isHungry = !(time <= 6) ? true : false;

Let's take a closer look at our condition. The ! means not, so we can interpret the statement as Is the time six or earlier?

Conclusion

In this topic, we've considered what to do if our program should work according to some conditions. Conditional operators are an essential part of programming. Remember: when we work with if...else operators or the ternary operator, the condition must be boolean.

529 learners liked this piece of theory. 18 didn't like it. What about you?
Report a typo