Logical Operators Review

Introduction

Hello! Today I'd like to review some logical operators to prepare for my exams tomorrow. This post will just be class notes for me and anyone else to use as a quick review on Logical Operators.

Overview: NOT(!), AND(&&), OR(||)

NOT(!):

Operates on an expression, returns the opposite of its truthiness.

AND(&&):

Takes two expressions, returns the first expression that returns false.

OR(||):

Takes two expressions, returns the first expression that returns true.

NOTE: Anything with a value in it is inherently true. Anything without a value is false. Quick examples below.

"string"
1
3.14
-123123
"false"

Are all considered true, because they have a value.

0
""
undefined
null

Are all considered false, because they contain no values.

1. The Bang Operator, NOT (!)

NOT(!):

Operates on an expression, returns the opposite of its truthiness.

As stated above, when adding the Bang operator to an expression, you will output the opposite of its current Boolean state. Truthy values become false and falsey values become true.

NOTE: There is no limit to the amount of ! you can add to an expression. It will just keep flipping between the two Boolean states with every !.

Lets look at an example:

const truthy = true
const falsey = false

!truthy
=> Expected output: false

!falsey
=> Expected output: true

!!truthy
=> Expected output: true

!!falsey
=> Expected output: false

!!!!!!!!!!!!!!truthy
=> Expected output: true

You can add as many Bang operators as you want and it will just keep switching Boolean states as there are operators.

Now lets look at some additional examples where the values aren't just true or false.

const truthy = "String"
const falsey = 0

Boolean(truthy)
=> Expected output: true

Boolean(falsey)
=> Expected output: false

!truthy
=> Expected output: false

!falsey
=> Expected output: true

The truthiness of a value isn't limited to just true or false. As noted earlier, expressions with a value are considered true while expressions without any value are considered false.

NOTE: You can use the built in JS object wrapper, Boolean(), to determine if a value is true or false AND to also convert the value into a boolean. You can also use the Bang operator to convert the value into a boolean as well (simply by using !!).

2. The AND Operator (&&)

AND(&&):

Takes two expressions, returns the first expression that returns false.

Lets look at a simple example:

const expression1 = 'truthy'
const expression2 = 0

expression1 && expression2
=> Expected output: 0

The returned expression is the value of expression2. Since expression 2 is the first false statement being compared, it will return that value.

Lets look at another example, this time using mathematical expressions:

4 * 3 && 11 * 0
=> Expected output: 0

Notice that it will give us the resultant value of the right hand expression since that is the expression with the false value.

Now what happens when both sides are true?

4 * 3 && 11 + 12
=> Expected output: 23

It returns the 2nd expression's value, despite it being true. This is because && is required to return a value and if both sides are true, it will return the last expression it evaluated (which in this case is the right hand expression).

3. The OR Operator (||)

OR(||):

Takes two expressions, returns the first expression that returns true.

Works much like the AND (&&) operator except it returns the first expression it finds that is true.

Lets look at some examples:

const truthy = "I am Truth"
const falsey = null

falsey || truthy
=> Expected output: "I am Truth"

1 * 33 || 42 * 10
=> Expected output: 33

42 * 10 || 1 * 33
=> Expected output: 420

const zero = 0 || "0"

console.log(zero)
=> Expected output: "0"

console.log(typeof(zero))
=> Expected output: String

Notice how in the last example, the value of a string that contains "0" is considered a value and therefore true.