This is a draft lesson and it may still be under review
4 min read

Conditionals in Programming or Coding

Using conditions to control the flow of your code and make the computer obey

Mastering the use of conditions is one of the 5 fundamental skills of building algoritms:

  1. Variables.
  2. Conditionals.
  3. Arrays.
  4. Loops.
  5. Functions.

Conditions are the only way developers have to tell computer how to make decisions in real time, very similar to how our brains work.

Let's say we are building a program to to help us pick what to ware and we hate the blue color, we can tell the computer to avoid blue using a condition like this:

If color is not blue, then... do something.
Else... do nothing or exit.

Conditionals

And this is how we would write this in Javascript:

if(color != 'blue'){
    //any code here will run when color is different than blue
}
else{
    //it will only run this code if color is not blue.
}

It is all about the question: What to ask?

The previous example was a simple condition, but in real life picking what to ware involves a combination of several conditions to make the final decision, for example: Lets look at this algorithm that tells if you have a flue

Hit by a flu or have a cold

If you want to represent this algorithm in Javascript it will look something like this:

let feelsLikeHitByTrain = true;
let youWereHitByTrain = false;

if(feelsLikeHitByTrain == true){
  if(youWasHitByTrain == true){
    console.log("You don't have a flue");
  }
  else{
    console.log("You have a flue");
  }
}
else{
  console.log("You don't have a flue");
}

Basically, this algorithm has two variables to consider: feelsLikeHitByTrain and youWereHitByTrain. Our job as developers is to sit down and try to prepare a strategy and come up with an algorithm that solves a problem.

AND and OR operators

Another way to write the algorithm is to combine to questions in the same condition using the AND and OR operators that in Javascript are represented with && for AND and || for OR:

if(feelsLikeHitByTrain == false || youWereHitByTrain == true){
  console.log("You don't have a flu");
}
else if(feelsLikeHitByTrain == true && youWereHitByTrain == false){
  console.log("You have a flu")
}
else{
  console.log("I have no idea");
}

As you can see here we are using else if together for the first time, for faster coding. Another trick you can use for faster coding:

OriginalEquivalent
instead of if(feelsLikeHitByTrain == true)you write if(feelsLikeHitByTrain)
instead of if(feelsLikeHitByTrain == false)you write if(!feelsLikeHitByTrain)

> and < Greather Than or Lower Than Operators

In the particular case you are comparing numbers, you can also if one of the compared numbers ir bigger or smaller than the other:

if(age < 16){
  console.log("You cannot drive");
}
else if(age >= 16){
  console.log("You can drive");
}

Ternary (inline conditions)

Another great trick for faster coding is using ternaries that basically allow us to code everything in just one line:

const flu = (feelsLikeHitByTrain && !youWereHitByTrain) ? true : false;

In this example the variable flu will only be true if feelsLikeHitByTrain==true and youWereHitByTrain==false at the same time. If that question is not true, then flue will be false.

Ternaries are being use A LOT these days because the save you a lot of time.

Conditional Rendering

Another great use of the conditions is to generate HTML based on certain conditions, for example, let's say that we have a bootstrap alert that we are about to render into the website:

let alertHTMLCode = "<div>Warning! You cannot drive</div>";

If we want this alert to show only if the user is younger that 16 years old we could do something like:

let age = 14;
let alertHTMLCode = (age < 16) ? "<div>Warning! You cannot drive</div>" : "";

Now our alertHTMLCode variable will be empty if the user age is less than 16, if its more it will contain the entire HTML.