# ⚖️ JavaScript Comparison and Logical Operators

May 09, 2020 ● Tag: javascript

## Understanding Boolean Values

A `Boolean`

is a JavaScript data type that can have only two values: `true`

or `false`

.
These two states are `mutually exclusive`

and therefore, they cannot both occur at the same time.

Example:

1function welcomeToBooleans() {2 return true;3}

Note: `Boolean`

values are never written with quotes.

## Use Conditional Logic with If Statements

Every time we have to make a decision in our JavaScript code, we use to `if`

keyword.
It tells JavaScript to execute the code defined in the curly braces if a certain condition is met.

These conditions are known as `Boolean conditions`

and they can have only two values: `true`

or `false`

.

Example:

1function trueOrFalse(wasThatTrue) {2 if (wasThatTrue) {3 return 'Yes, that was true';4 }5 return 'No, that was false';6}

As we can see from the example above, `wasThatTrue`

is `true`

so our `trueOrFalse`

function will return the string `"Yes, that was true"`

.
The second `return`

statement `"No, that was false"`

will not execute.

## Comparison with the Equality Operator

In JavaScript, the equality operator `==`

compares two values and returns `true`

if they're equivalent or `false`

if they are not.

1function test(num) {2 if (num == 12) {3 return 'Equal';4 }5 return 'Not Equal';6}78test(10);

As we can see from the code above, the `test`

function checks if the value of `num`

is equal to `12`

, and if this is `true`

, it returns `Equal`

. In our case, we pass the `Number`

`10`

to the `test`

function, so it returns `Not Equal`

.

Although the previous example looks pretty straight forward, there is one more thing to consider when using the `equality operator`

and that's `type coercion`

.
`Type Coercion`

means that, if JavaScript need to compare two different data types (`numbers`

and `strings`

), it has to convert one type to another.

For instance:

11 == 1; // true21 == 2; // false31 == '1'; // true4'3' == 3; // true

Note: keep in mind that the equality operator (`==`

) is different from the assignment operator (`=`

), which is used to assign the value at the `right`

of the operator to a variable in the `left`

.

## Comparison with the Strict Equality Operator

While the equality operator (`==`

) converts both values that we want to compare to a common type, the strict equality operator (`===`

) does not perform a type conversion.

Example:

117 === 17; // true217 === '17'; // false

In the second example, `17`

is a `Number`

type and `'17'`

is a String type; so the strict equality operator considers them unequal.

Note: In JavaScript, we can determine the type of a variable using the `typeof`

operator:

1typeof 17; // returns 'number'2typeof '17'; // returns 'string'

## Practice comparing different values

We can summarize the difference between `==`

and `===`

in the following example:

13 == '3'; // returns true because JavaScript converts the value on the right of the operator from string to number23 === '3'; // returns false because the types are different and JavaScript does not perform type conversion

## Comparison with the Inequality Operator

The inequality operator (`!=`

) is the opposite of the equality operator.
It means 'Not Equal' and it returns `false`

in the cases where the equality operator would return `true`

.

Moreover, just like the equality operator, the inequality operator performs a `type conversion`

while comparing.

Examples:

11 != 2; // true21 != '1'; // false31 != true; // false

## Comparison with the Strict Inequality Operator

The strict inequality operator (`!==`

) is the opposite of the strict equality operator.
It means 'Strictly Not Equal' and it returns `false`

in the cases where the strict equality operator would return `true`

.

Moreover, just like the strict equality operator, the inequality operator doesn't performs a `type conversion`

while comparing.

Examples:

11 !== 2; // true21 !== '1'; // true31 !== true; // true

## Comparison with the Greater Than Operator

The greater than operator (`>`

) compares the values of two numbers and returns `true`

if the number to the left is greater than the number to the right. Otherwise, it returns `false`

.

Just like the `equality operator`

, also `greater than`

operator converts data types of values while comparing.

Examples:

117 > 1; // true217 > '1'; // true31 > 17; // false4'1' > 17; // false

## Comparison with the Greater Than Or Equal To Operator

The `greater than or equal to`

operator (`>=`

) compares the values of two numbers.
If the number to the left is greater than or equal to the number to the right, it returns `true`

. Otherwise, it returns `false`

.

The `greater than or equal to`

operator converts data types while comparing.

Examples:

117 >= 17; // true217 >= '1'; // true31 >= 17; // false4'17' >= 20; // false

## Comparison with the Less Than Operator

The `less than`

operator (`<`

) compares the values of two numbers.
If the number to the left is less than the number to the right, it returns `true`

. Otherwise, it returns `false`

.

The `less than`

operator converts data types while comparing.

Example:

11 < 2; // true2'2' < 17; // true33 < 3; // false43 < 1; // false5'3' < 1; // false

## Comparison with the Less Than Or Equal To Operator

The `less than or equal to`

operator (`<=`

) compares the values of two numbers.
If the number to the left is less than or equal to the number to the right, it returns `true`

.
Otherwise, it returns `false`

.

The `less than or equal to`

operator converts data types while comparing.

Examples:

12 <= 5; // true2'2' <= 2; // true35 <= 5; // true45 <= 2; // false5'17' <= 4; // false

## Comparisons with the Logical And Operator

The logical `and`

operator (`&&`

) returns `true`

if and only if the operands to the left and right of it are `true`

.
This operator is very useful when we need to compare more than one thing at a time.

As we can see from the example below, the `testLogicalAnd`

function will return `"Yes"`

if and only if the `val`

value is between 25 and 50:

1function testLogicalAnd(val) {2 if (val >= 10 && val <= 20) {3 return 'Yes';4 }56 return 'No';7}89testLogicalAnd(10);

## Comparisons with the Logical Or Operator

The logical `or`

operator (`||`

) returns `true`

if either of the operands is `true`

. Otherwise, it returns `false`

.

From the example below we can see that the `testLogicalOr`

function will return `"Outside"`

if `val`

is either less than 10 `or`

greater than 20.

1function testLogicalOr(val) {2 if (val < 10 || val > 20) {3 return 'Outside';4 }56 return 'Inside';7}89testLogicalOr(15);

## Introducing Else Statements

An `if/else`

statement gives us the possibility to return two separate code blocks.
When a condition for an `if`

statement is `true`

, the first code block is executed.
If, however, the condition is `false`

, an alternate code block will execute instead of the first code block.

Example:

1function testElse(val) {2 var result = '';34 if (val > 5) {5 result = 'Bigger than 5';6 } else {7 result = '5 or Smaller';8 }910 return result;11}1213testElse(4);

## Introducing Else If Statements

If we have to deal with more than two possible conditions, we can chain the `if`

statements together with `else if`

statements.

When dealing with multiple conditions, the statements `if`

and `else if`

need to follow a particular order, depending on the result that we want to return from a function.

Example:

1function testElseIf(val) {2 if (val < 5) {3 return 'Less than 5';4 } else if (val < 10) {5 return 'Less than 10';6 } else {7 return 'Greater than or equal to 10';8 }9}1011testElseIf(7);