In programming, as in life, it is often necessary to change the behavior of a program depending on some external condition. A few examples:

If it rains, then use your umbrella. If it’s sunny and you go to the beach, then use sunscreen. If it’s later than 10 PM, then activate the dark mode of the app.

Here we see keywords in bold. Condition in italics. And, useful action, underlined.

In JS the conditional if statement will look like this:

if (/* condition */) {
  // do something useful if the condition is true
}

Moving a little closer to our examples, we could get something like this:

if (isRaining) {
  useUmbrella ();
}

— Wouldn’t there be an error because isRaining variable and useUmbrella() function are not defined?

— It’s great that you noticed that, Hero. But, now, we are looking at a piece of code taken out of context that will allow you to understand the structure of the if statement. In practical tasks, you will write fully functional code from A to Z.

— Okay.

— So, in JavaScript, a conditional statement consists of the keyword if, a condition (enclosed in parentheses), and a useful action wrapped in curly braces.

  1. A useful action will only be performed if the condition is true.
  2. Any block of code can be a useful action and it can consist of any number of lines.

— But what if I want to execute some block of code when the condition is false?

— Then, there are two options. First, you can invert the condition using the exclamation mark - !.

if (!isRaining) {
  useUmbrella ();
}

In this case, we will use the umbrella when it is NOT raining.

Or, if we need to do two useful things depending on the same condition, we can add the else keyword.

if (isRaining) {   // condition
  useUmbrella();   // execute if the condition is true
} else {
  hideUmbrella();  // execute if condition is false
}

— Fair enough.

— In order to combine several conditions, the operators && (logical “AND”) and || (logical “OR”) are useful.

Then we could expand the application of our virtual umbrella and use it in situations where the sun is too strong.

if (isRaining || isHeavySunshine) {  // if it rains OR the sun is hot
  useUmbrella ();                    // get the umbrella
} else {
  hideUmbrella ();                   // hide the umbrella
}

— To be honest, I would also check that we have an umbrella in the first place.

— Great idea! But you will write the implementation yourself as a part of your coding practice.

Now it is very important to remember 2 rules by which logical AND and logical OR work.

  1. If at least one of the conditions is false, then the result of the logical “AND” - && - will always be false.
true && true;   // true
true && false;  // false
false && true;  // false
false && false; // false
  1. If at least one of the conditions is true, then the result of the logical “OR” - || - will always be true.
true || true;   // true
true || false;  // true
false || true;  // true
false || false; // false

I almost forgot. To compare numbers, you can use the standard operators < (less), and > (more). But to test for equality, use the === operator.

The single = is the assignment operator we’ve covered before, and the double == has some quirks that we’ll cover in the next level.

— Is there a way to tell if one number is “not equal” to another number?

— Yes, there’s a way to compare two values in JS using the operator !=. It works exactly as “not equals”. It returns true if the operands aren’t equal and false - if they are. It’s the exact opposite of ===.

console.log(1 === 1); // true
console.log(1 != 1); // false
console.log(1 != 2); // true
console.log(1 > 2); // false
console.log(1 < 2); // true