Logical Operators: The Javascript Language Javascript Fundamentals
Logical Operators: The Javascript Language Javascript Fundamentals
EPUB/PDF 👤
EN
Logical operators
There are four logical operators in JavaScript: || (OR), && (AND), ! (NOT), ?? (Nullish Coalescing). Here we
cover the first three, the ?? operator is in the next article.
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.
|| (OR)
The “OR” operator is represented with two vertical line symbols:
1 result = a || b;
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.
✍
1 alert( true || true ); // true
2 alert( false || true ); // true
3 alert( true || false ); // true
4 alert( false || false ); // false
As we can see, the result is always true except for the case when both operands are false .
✍
1 if (1 || 0) { // works just like if( true || false )
2 alert( 'truthy!' );
https://javascript.info/logical-operators 1/11
2/25/2021 Logical operators
3 }
Most of the time, OR || is used in an if statement to test if any of the given conditions is true .
For example:
✍
1 let hour = 9;
2
3 if (hour < 10 || hour > 18) {
4 alert( 'The office is closed.' );
5 }
✍
1 let hour = 12;
2 let isWeekend = true;
3
4 if (hour < 10 || hour > 18 || isWeekend) {
5 alert( 'The office is closed.' ); // it is the weekend
6 }
In other words, a chain of OR || returns the first truthy value or the last one if no truthy value is found.
For instance:
https://javascript.info/logical-operators 2/11
2/25/2021 Logical operators
1 alert( 1 || 0 ); // 1 (1 is truthy) ✍
2
3 alert( null || 1 ); // 1 (1 is the first truthy value)
4 alert( null || 0 || 1 ); // 1 (the first truthy value)
5
6 alert( undefined || null || 0 ); // 0 (all falsy, returns the last value)
This leads to some interesting usage compared to a “pure, classical, boolean-only OR”.
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):
✍
1 let firstName = "";
2 let lastName = "";
3 let nickName = "SuperCoder";
4
5 alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder
2. 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.
✍
1 true || alert("not printed");
2 false || alert("printed");
In the first line, the OR || operator stops the evaluation immediately upon seeing true , so the alert isn’t
run.
Sometimes, people use this feature to execute commands only if the condition on the left part is falsy.
&& (AND)
The AND operator is represented with two ampersands && :
https://javascript.info/logical-operators 3/11
2/25/2021 Logical operators
1 result = a && b;
In classical programming, AND returns true if both operands are truthy and false otherwise:
✍
1 alert( true && true ); // true
2 alert( false && true ); // false
3 alert( true && false ); // false
4 alert( false && false ); // false
An example with if :
✍
1 let hour = 12;
2 let minute = 30;
3
4 if (hour == 12 && minute == 30) {
5 alert( 'The time is 12:30' );
6 }
✍
1 if (1 && 0) { // evaluated as true && false
2 alert( "won't work, because the result is falsy" );
3 }
In other words, AND returns the first falsy value or the last value if none were found.
https://javascript.info/logical-operators 4/11
2/25/2021 Logical operators
The rules above are similar to OR. The difference is that AND returns the first falsy value while OR returns the first
truthy one.
Examples:
✍
1 // if the first operand is truthy,
2 // AND returns the second operand:
3 alert( 1 && 0 ); // 0
4 alert( 1 && 5 ); // 5
5
6 // if the first operand is falsy,
7 // AND returns it. The second operand is ignored
8 alert( null && 5 ); // null
9 alert( 0 && "no matter what" ); // 0
We can also pass several values in a row. See how the first falsy one is returned:
✍
1 alert( 1 && 2 && null && 3 ); // null
✍
1 alert( 1 && 2 && 3 ); // 3, the last one
So the code a && b || c && d is essentially the same as if the && expressions were in parentheses: (a &&
b) || (c && d) .
https://javascript.info/logical-operators 5/11
2/25/2021 Logical operators
For instance:
✍
1 let x = 1;
2
3 (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.
✍
1 let x = 1;
2
3 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.
! (NOT)
The boolean NOT operator is represented with an exclamation sign ! .
1 result = !value;
For instance:
✍
1 alert( !true ); // false
2 alert( !0 ); // true
https://javascript.info/logical-operators 6/11
2/25/2021 Logical operators
✍
1 alert( !!"non-empty string" ); // true
2 alert( !!null ); // false
That is, the first NOT converts the value to boolean and returns the inverse, and the second NOT inverses it again. In
the end, we have a plain value-to-boolean conversion.
There’s a little more verbose way to do the same thing – a built-in Boolean function:
✍
1 alert( Boolean("non-empty string") ); // true
2 alert( Boolean(null) ); // false
The precedence of NOT ! is the highest of all logical operators, so it always executes first, before && or || .
✔ Tasks
solution
solution
solution
solution
solution
solution
Create two variants: the first one using NOT ! , the second one – without it.
https://javascript.info/logical-operators 8/11
2/25/2021 Logical operators
solution
importance: 5
solution
If the visitor enters "Admin" , then prompt for a password, if the input is an empty line or Esc – show “Canceled”,
if it’s another string – then show “I don’t know you”.
The schema:
Begin
Who's there?
C l d
https://javascript.info/logical-operators
Id 't k 9/11
2/25/2021 Logical operators
Canceled I don't know you
Password?
Please use nested if blocks. Mind the overall readability of the code.
Hint: passing an empty input to a prompt returns an empty string '' . Pressing ESC during a prompt returns
null .
solution
Comments
● If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of
commenting.
● If you can't understand something in the article – please elaborate.
● To insert few words of code, use the <code> tag, for several lines – wrap them in <pre> tag, for more
than 10 lines – use a sandbox (plnkr, jsbin, codepen…)
https://javascript.info/logical-operators 10/11
2/25/2021 Logical operators
LOG IN WITH
OR SIGN UP WITH DISQUS ?
Name
https://javascript.info/logical-operators 11/11