If (you're learning JavaScript) else Read this post

Last update: 01 - 11 - 2023

What is a conditional operator?

Conditionals are control or flow structures of the data we are handling in our algorithm. In this case we are talking about the JavaScript if else. As its name suggests, a data must fulfill a condition to execute certain code.

In fact it is quite intuitive. As pseudocode it looks like this:

If(this condition is fulfilled){
  This code runs;
}Else{
  This one runs;
}

Now with a simple example:

if(10 > 5){
  console.log("this condition runs the program");
}else{
  console.log("This condition is not met");
}

How to write an if else statement in JavaScript?

To write a conditional block in JavaScript you must start with the keyword if followed by the condition to evaluate inside parentheses. JavaScript uses curly brackets to open and close lines of code ( { } ); you should also consider that conditions are evaluated to true by default unless you tell it otherwise.

If you want to evaluate a second opposite condition, you use else but do not indicate the condition inside parentheses.

if(true){
  console.log("Condition evaluated on true");
}else{
  console.log("This message will be printed if the condition is false.");
}

Multiple else if or nested else if statements

Nested conditionals are used when we want to evaluate multiple options, for example:

let minesOfMoria = true;
let CahradrasPass = true;
let surroundIsengard = false;

if(minesOfMoria){
  console.log("What happened in the saga of the Lord of the Rings happens");
} else if(CahradrasPass){
 console.log("Gandalf does not fall and does not return so OP.");
} else if(surroundIsengard){
  console.log("Not a good idea");
} else{
  console.log("Boromir dies anyway xD");
}

In this case we are evaluating three conditions, two are truthy and one is falsy for didactic reasons. In this example code the condition to be executed is the first one, minesOfMoria, because it is true. It is not necessary to indicate in the condition that this variable is true (minesOfMoria === true) because the variable itself already stores the boolean value.

If the first variable were false then the second option is executed (CahradrasPass).

And if all the options were false... Poor Boromir.

Nested conditions can be complicated to read if there are more options to evaluate and this is where the logical operators come into play to facilitate this task. There are also the flow controls with the switch statement but we will see that later.

Using logical operators in a conditional block

Logical operators help us to evaluate two or more options within the same condition block and therefore reduce the lines of code to write, let's see a couple of examples.

if(20 > 10 || 20 < 30){
  console.log("20 is greater than 10");
}

The logical operator or will take the first truthy value in the condition. In this case 20 > 10; if this is not the case it will take the second value and in case both are false it will execute the else if it has one.

Another detail: conditional code blocks accept other operators in order to evaluate.

Greater than > 
Lesser than < 
Greater or equal than >= 
Lesser or equal than <= 
Equal to == 
Strictly equal to === 
Unequal != 
Strictly unequal !== 
Not !true
Not !false

Now the same example with the and operator.

if(20 >= 10 && 20 <= 30){
  console.log("20 is greater than 10 and lesser than 30");
}

Unlike the or operator, the and operator will evaluate that both conditions are met in order to execute the code. In this case it is fulfilled.

If one of the two options is not fulfilled then the evaluation will jump to an else if it has one. And if neither is fulfilled, the same case happens.

The JavaScript ternary operator appears!!

The ternary operator is a "shorthand" way of writing an if else conditional.

Its syntax is quite simple and allows you to write a conditional block on a single line.

Ternary operator syntax

condition ? console.log("The if is replaced by a question mark.") : console.log("The else is replaced by a colon")

Let's look at a common example:

// If else syntax
let LegolasArrows = 60;

if(LegolasArrows > 60){
  console.log("The power of the film script");
}else{
  console.log("He collected the arrows of his enemies");
}

// Ternary operator syntax
LegolasArrows > (60) ? console.log("The power of the film script") : console.log("He collected the arrows of his enemies");

I hope this has made it clearer to you how the JavaScript if else works. I also invite you to write me through my networks if this contribution has helped you, if you have not understood or if you are also a fan of the Lord of the Rings.😆