← Back to Lessons
Edit on Github

Conditionals in Programming with Javascript

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

1. Variables.
2. `Conditionals`.
3. Arrays/Objects.
4. Loops.
5. Functions.

Here is a great video explainin conditionals

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

Let's say we are building a program to help us pick what to wear and we hate the color blue. 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.

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 blue.
}``````

The previous example was a simple condition, but in real life picking what to wear involves a combination of several conditions to make the final decision, for example: Let's look at this algorithm that tells if you have a flu.

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(youWereHitByTrain == true){
console.log("You don't have a flu");
}
else{
console.log("You have a flu");
}
}
else{
console.log("You don't have a flu");
}``````

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 two questions in the same condition using the `AND` and `OR` operators which 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, to find out if one of the compared numbers is greater or lesser 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 `flu` will be false.

Ternaries are being used A LOT these days because they save you a lot of time and we will also be able to use them later in jsx code (React).

Conditional Rendering

Another important use of conditionals 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 greater than 16, if it's less it will contain the entire HTML.

Subscribe for more!

CONTACT

MEDIA KIT

SOCIAL & LIVE LEARNING

The most efficient way to learn: Join a cohort with classmates like yourself, live streamings, coding jam sessions, live mentorships with real experts and keep the motivation.

INTRO TO CODING

From zero to getting paid as a developer, learn the skills of the present and future. Boost your professional career and get hired by a tech company.

DATA SCIENCE

Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.

30DAYSOFGEEKCODING

Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.

A.I. & MACHINE LEARNING

Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.