JS Fundamentals - Logical Operators Flashcards

1
Q

4 Logical operators

A

There are four logical operators in JavaScript: || (OR), && (AND), ! (NOT), ?? (Nullish Coalescing)

Although they are called “logical”, they can be applied to values of any type, not only boolean. Their result can also be of any type.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

OR operator

A

The “OR” operator is represented with two vertical line symbols:

In classical programming, the logical OR is meant to manipulate boolean values only. If any of its arguments are true, it returns true, otherwise it returns false.

In JavaScript, the operator is a little bit trickier and more powerful. But first, let’s see what happens with boolean values.

If an operand is not a boolean, it’s converted to a boolean for the evaluation.

For instance, the number 1 is treated as true, the number 0 as false

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Returns the original value

A

The OR || operator does the following:

Evaluates operands from left to right.
For each operand, converts it to boolean. If the result is true, stops and returns the original value of that operand.
If all operands have been evaluated (i.e. all were false), returns the last operand.
A value is returned in its original form, without the conversion.

In other words, a chain of OR || returns the first truthy value or the last one if no truthy value is found.

For instance:

alert( 1 || 0 ); // 1 (1 is truthy)

alert( null || 1 ); // 1 (1 is the first truthy value)
alert( null || 0 || 1 ); // 1 (the first truthy value)

alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Getting the first truthy value from a list of variables or expressions.

A

For instance, we have firstName, lastName and nickName variables, all optional (i.e. can be undefined or have falsy values).

Let’s use OR || to choose the one that has the data and show it (or “Anonymous” if nothing set):

let firstName = “”;
let lastName = “”;
let nickName = “SuperCoder”;

alert( firstName || lastName || nickName || “Anonymous”); // SuperCoder
If all variables were falsy, “Anonymous” would show up.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Short-circuit evaluation

A

Another feature of OR || operator is the so-called “short-circuit” evaluation.

It means that || processes its arguments until the first truthy value is reached, and then the value is returned immediately, without even touching the other argument.

That importance of this feature becomes obvious if an operand isn’t just a value, but an expression with a side effect, such as a variable assignment or a function call.

true || alert(“not printed”);
false || alert(“printed”);

Sometimes, people use this feature to execute commands only if the condition on the left part is falsy.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

&& (AND)

A

Just as with OR, any value is allowed as an operand of AND:

if (1 && 0) { // evaluated as true && false
alert( “won’t work, because the result is falsy” );
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

AND “&&” finds the first falsy value

A

Evaluates operands from left to right.
For each operand, converts it to a boolean. If the result is false, stops and returns the original value of that operand.
If all operands have been evaluated (i.e. all were truthy), returns the last operand.

// if the first operand is truthy,
// AND returns the second operand:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// if the first operand is falsy,
// AND returns it. The second operand is ignored
alert( null && 5 ); // null
alert( 0 && “no matter what” ); // 0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Precedence of AND && is higher than OR ||

A

The precedence of AND && operator is higher than OR ||.

So the code a && b || c && d is essentially the same as if the && expressions were in parentheses: (a && b) || (c && d).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Don’t replace if with || or &&

A

Sometimes, people use the AND && operator as a “shorter way to write if”.

For instance:

let x = 1;

(x > 0) && alert( ‘Greater than zero!’ );
The action in the right part of && would execute only if the evaluation reaches it. That is, only if (x > 0) is true.

So we basically have an analogue for:

let x = 1;

if (x > 0) alert( ‘Greater than zero!’ );
Although, the variant with && appears shorter, if is more obvious and tends to be a little bit more readable. So we recommend using every construct for its purpose: use if if we want if and use && if we want AND.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

! (NOT)

A

alert( !true ); // false
alert( !0 ); // true
A double NOT !! is sometimes used for converting a value to boolean type:

alert( !!”non-empty string” ); // true
alert( !!null ); // false

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Precedence

A

The precedence of NOT ! is the highest of all logical operators, so it always executes first, before && or ||.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly