JavaScript Tutorial Series: Boolean Logic and Conditionals
Published: 2023-02-11 14:50:02

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). 

```JavaScript
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.

```JavaScript
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`.

```JavaScript
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`.

``` JavaScript
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`. 

```JavaScript
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**

```JavaScript
/* 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. 

```JavaScript
//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?

```JavaScript
//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. 

```JavaScript
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.

```JavaScript
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".

```JavaScript.
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.