JavaScript Tutorial Series: Boolean Logic and Conditionals

One of the most important aspects of programming is the ability to run code that depends on particular circumstances.

Let's say we have a student and, we want to check if his name is "John". If his name is "John" we'll change his attendance to true and log "Hello John". If it isn't we'll keep it as false and log "You are not John".

How do we do that? Let's take a look at Comparison and logical operators first.

Comparison operators

Operator	Description
==	equal to
===	equal value and type
!=	not equal
!==	not equal value or type
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
?	ternary operator

• == The equality operator also known as loose equality converts the values to a common type before comparing them and returns a boolean value.

• === The equality operator also called strict equality does not convert the values to a common type. This operator compares the values and the values' types and return true only if the types and values match (are identical).
  

let x = '5'; 
let y = 5;
console.log( x == y); // true
console.log( x === y); //false

The first comparison between x and y returns true because x is converted to a number and then compared to y which will return true.

The second comparison returns false because the values of the variables and their types are compared.

Let's check the types of our variable and to do that we use the typeof operator.

let x = '5'; 
let y = 5;

console.log(typeof x); //string
console.log(typeof y); //number

As we can see x is a string and y is a number and if both values and types do not match the strict equality will return false.

The loose inequality (!=) and strict inequality (!==) works the same way.

Logical operators

-&& The logical operator and: If the conditions being compared are all true, then the expression will return true. If one of the conditions being compared is false then the result will be false. If all the conditions compared are false then the result will be false.

let x = 5; 
let y = 7;
console.log( x>3 && y <10 ); //true
console.log( x>3 && y <x ); //false
console.log( x>y && y <x ); //false

• || The logical operator or: If one or all the conditions return true then the result will be true. If all conditions are false then the result is going to be false.

let x = 5; 
let y = 7;
console.log( x>3 || y <10 ); //true
console.log( x>3 || y <x ); //true
console.log( x>y || y <x ); //false

• ! The logical operator not: If the logical operator not is used with a boolean value it will return the opposite of that value. The value true becomes false and false becomes true.

let isTrue = true;

console.log(!isTrue); //false
console.log(!(!isTrue)); //true;

Conditionals

Depending on the conditions of some statements we will be able to run code to perform certain tasks. And to do that we use the if/else if/else conditional.

If/else

Let's take the example we mentioned at the beginning of this article.

Let's say we have a student and, we want to check if his name is "John". If his name is "John" we'll change his attendance to true and log "Hello John". If it isn't we'll keep it as false and log "You are not John".

So how do we do that. The keyword here is if. So let's write the steps we should take to turn our exercise into code using comments which is known as pseudo code

/* 1- To check if a student's name is john we should have a student variable set to the name John*/
/* 2- To change the attendance to true we should have an attendance variable set to false */
/* 3- use an if condition to check if the name is equal to John and if it is true we'll log "Hello John"*/
/* 4- if the condition is false we'll log "You are not John"*/

Now let's code it.

//student variable
let student = "John";

// attendance variable
let attendance = false;

//If condition
if(student === "John") {
 attendance = true;
 console.log(attendance); 
 console.log("Hello John");
}else{
 console.log(attendance);
 console.log("You are not John");
}

//The output will be "Hello John" and the attendance is true.

Let's change the name of our student to Karl what will the output be?

//student variable
let student = "Karl";

// attendance variable
let attendance = false;

//If condition
if(student === "John") {
 attendance = true;
 console.log(attendance); 
 console.log("Hello John");
}else{
 console.log(attendance);
 console.log("You are not John");
}
//The output will be false and you are not John

If/else if/ else

In the example above we had two check two conditions, if the student's name was John or if it wasn't John. Sometimes you need to check more than two conditions and for that we use the if / else if/ else condition.

Here's an example. Let's say we wanted to prompt a number from the user (which is done by using the prompt method) and check if the number is between 0 and a 1000 or bigger than 1000 or if its a negative number.

let number = prompt("Enter a number");

if (number >= 0 && number <= 1000) {
  console.log("You Chose a number between 0 and 1000");
} else if (number > 1000) {
  console.log("You chose a number larger than a 1000");
} else {
  console.log("Please input a valid non negative number");
}

Try this code on your own.

Ternary operator

The ternary operator can be used instead of if ... else. This operator accepts three operands, a condition followed by a question mark (?), an expression to be executed if the condition is true followed by a colon (:), and the third expression to be executed if the condition is false.

Let's go back to our student example.
Using the ternary operator, we're going to check if the student's name is John or not.

let student = "John";
let attendance = false;

student === "John" ? (
  attendance=true,  
  console.log(attendance),
  console.log("Hello John")) : (
  console.log(attendance), 
  console.log("You are not John"));

Switch Statements

When there are several conditions that need to be met a switch statement can be used which is a different way for writing conditionals (if..else if..else). In order to end the switch statement, each case clause must be followed by a break.

Let's ask the user for their favorite color. If the user's favorite color is red we'll log "Your favorite color is red", if it's green we'll log "Your favorite color is green" and if it's neither of them we'll log "We have different favorite colors".

let color = prompt("What is your favorite color?");

switch(color) {
  case "red":
    console.log("Your favorite color is red");
    break;
  case "green": 
    console.log("Your favorite color is green");
    break;
  default: 
    console.log("We have different favorite colors");
}

As we can see The color value is evaluated by the switch statement and then is compared to the values of each case in the switch statement. If a match is found, the related block of code is run. If no match is found the default case will run.