Logical operators

In the previous section we got introduced to the logical operator ">", which means "greater than". This is used between two values (meaning it is a binary operator, as are the arithmetic operators) to find if the one to the left is greater than the one on the right.

We use logical operators to find if something is true of false. This is, amongst others, useful together with control structures (as you will learn later on). JavaScript's logical operators are:

  • < (less than)

  • <= (less than or equal)

  • > (greater than)

  • >= (greater than or equal)

  • == (equal)

  • === (precise equal)

  • != (not equal)

  • !== (not precisely equal)

  • && (and)

  • || (or)

All of the operators above will yield a result of true or false. Below are a number of examples where you can see these operators in use. The operators and (`&&`) and or (||) are used in combining other boolean expressions. E.g. if you need to know if a user is signed in and if the user have access to the page it's trying to view.

The or operator can be used if it's enough with at least one of two (or more) expressions are true. E.g. if it's sunny outside or you have an umbrella, you can walk outside (though not in Trondheim... The umbrella will be destroyed by the wind so buy a good all weather jacket).

In the example directly below we check if 4 is less than 4, which it is not. In the second example we check if 4 is less than or equal to 4, which it is.

4 < 4

>> false

4 <= 4

>> true

In the example directly below we check if 10 is greater than 8, which it is. As 10 is also greater than or equal to 5, true is also returned for the second example.

10 > 8

>> true

10 >= 5

>> true

In the first example directly below we check if the string "Humbug" is equal to the string "humbug". Since each character is represented by a ASCII number, it is possible to compare two strings, and see who is greater. Upper case letters have a lower ASCII number than lower case, so if we were to check if "Humbug" < "humbug", we would get true in return.

In the second example directly below we check if an empty string is equal to zero. As an empty string evaluates to false, and the number 0 also does so, the result is `true` (false == false). On the other hand, in the next example we check if the empty string is strictly equal to 0. That is, if it has the same value and is of the same data type. As an empty string is a string and the number 0 is a number, they are not the same.

To avoid unexpected evaluations and type conversion I recommend using the === operator, unless you want type conversion or you are sure that both values are of the same type (but then again it doesn't harm to use the three-character comparison operator).

"Humbug" == "humbug"

>> false

"" == 0

>> true

"" === 0

>> false

Below are two examples, where one of them are using the not (!) operator. The first example use two exclamation marks before the string. This will convert the following data type into a boolean value. If we where to only type "JavaScript" the result would have been "JavaScript". By adding !! we get the boolean value. An string with content is evaluated to true. An empty string is evaluated to false.

In the second example we add just one exclamation mark in front of the string. This is not-operator. Whatever the following data type's boolean evaluated value would have been, the not-operator negates it. A string with content will evaluate to true, but by negating it (the opposite value), you get false. If you had added one more exclamation mark in the first example (!!!"JavaScript") the result would have been false, as you negate the boolean value. You can also negate the negation, thus getting the original boolean value.

!!"JavaScript"

>> true

!"Python"

>> false

In the next example we check if two strings are not similar (!=). As they have different content, they are not similar and the result is thus true. In the second example though we use the "not strictly similar". An empty string have the same value as false, when we use two equal symbols (==), but they are not of the same type. In this case, they are not strictly equal, so the result is true.

"JavaScript" != "Java"

>> true

"" !== false

>> true

The following example use the operators && and ||. For the and operator to return true, both values on either side must evaluate to true. If the first value is false, the second is never checked, as the result will be false anyway.

For the or operator, only one of the values have to evaluate to true. If the first one evaluates to true, the second isn't checked, as it's not necessary.

true && false

>> false

true || false

>> true

As with arithmetic you can use parentheses to control how the expression is evaluated. The expressions inside the parentheses will first be evaluated as either true or false, and then the entire expression is evaluated.

(true && false) || (false || true)

>> true

(true || false) && (true && false)

>> false

That the expression on the right with && and || are only evaluated when necessary is called short-circuit functions.

Last updated