DEV Community

Banesa Guaderrama
Banesa Guaderrama

Posted on

JavaScript Or Operator JavaScript: Logical operators and Boolean Values

alt text

Logical Operators ! (NOT), && (AND), || (OR)

If you are learning to code or new to coding, you will be using logical operators, these are typically used with Boolean (logical) values. But you need to pay close attention to it, since && and || operators will return the value of the specified operand, so if the operand is using a non-Booleans value, the return will be a non-Boolean value.

Logical operators are used with any primitive value or object. Its result will be based in whether the value is truthy or falsy:

First, let’s identify that there are three logical operators in JavaScript: ! (NOT), && (AND), ||(OR) -represented with two vertical line symbols.

! (Logical NOT)

Using the ! operator in front of a value will convert it to a Boolean and return an opposite value. It means that a truthy value will return false, and a falsy will return true. Logical || (OR) is meant to manipulate boolean values only. This method is known as negation:

Example:



!true; // negating true returns false
<<false

!0; // 0 is a false value, so negating it returns true
<<true



Enter fullscreen mode Exit fullscreen mode

Using double negation (!!) can help you to find if a value is truthy or falsy, specially when you are not an experienced coder and you need to verify, then you can first test out using this method and see if the value is truthy or falsy.

Example:



!! ‘ ’; // empty string value is false
<< false

!!“hello”;
<< true

!!3;
<< true

!!NaN;
<<False

!!“false”;
<< true

!!‘0’;  // Remember that a number 0 (zero) is false
<< true



Enter fullscreen mode Exit fullscreen mode

Now, let’s define the operators && and || which represents the logical AND and OR logical operators.

Visual example:



// Logical AND operator
true  && true;  // true
true  && false; // false
false && true;  // false
false && false; // false

// Logical OR operator
true  || true;  // true
true  || false; // true
false || true;  // true
false || false; // false



Enter fullscreen mode Exit fullscreen mode

&& (AND) Logical Operator

The logical operator is used with two or more values (operands), and only evaluates to true if all the operands are truthy. The value returned will be the last truthy value if they are all true, but it will return the first falsy value if at least one value is false.

Example:



const x = 7;
const y = 4;

(x < 10 && y > 1); // true 
(x < 10 && y < 1); // false



Enter fullscreen mode Exit fullscreen mode

|| (OR) Logical Operator

The logical operator || (OR) also is used with two or more values, but it evaluates to true if any of the operands (values) are true, so only evaluates to false if both operands are falsy.

Example



const x = 7;
const y = 4;

(x == 5 || y == 5); // false 
(x == 7 || y == 0); // true
(x == 0 || y == 4); // true
(x == 7 || y == 4); // true


Enter fullscreen mode Exit fullscreen mode

Conclusion

In JavaScript, && and || will not always return a Boolean value, but operators always will return the value of one of their operand expressions. And, using double negation !! your truthy and falsy values can be converted to Booleans.

Top comments (7)

Collapse
 
andreandyp profile image
André Michel Andy

Great article! Don't forget that && and || use short-circuit evaluation, useful for use cases like feature flags and set default values:

//if flag is true, then execute this function
process.env.FLAG && someFunc();

//Instead of...
const var2 = var1 ? var1 : "something";
//...use || operator
const var2 = var1 || "something";
Enter fullscreen mode Exit fullscreen mode
Collapse
 
merudo profile image
Guillaume F.

Yes!

As a reminder, the logical operators work the following way with non-boolean values:

expr1 && expr2: If expr1 is truthy, returns expr2; else, returns expr1.
expr1 || expr2: If expr1 is truthy, returns expr1; else, returns expr2.

Collapse
 
banesag profile image
Banesa Guaderrama

Hi André! Thank you for your comment. With just some lines you have provided a great input about default values.

Collapse
 
peter profile image
Peter Kim Frank

Great post! Just a heads up that you can highlight code like so if you'd like:

code block with no colors example

code block with colors example

Collapse
 
banesag profile image
Banesa Guaderrama

Hi Peter! Thanks for the advise, I for sure will start doing it.

Collapse
 
lexlohr profile image
Alex Lohr

The bitwise operator ^ (XOR) can also be used to evaluate if only one of both given expressions is true and can be a useful shorthand:

x ^ y === Number(x && !y || !x && y)

Since it is not a logical operator, it will cast to Number (0 = false, 1 = true), but if will accept any true-ish value, so you only need to cast to boolean if you actually require the result to be one.

Unfortunately, there's no logical XOR operator in JS as of now.

Collapse
 
banesag profile image
Banesa Guaderrama

Thanks for your input Alex! You have made more robust the post with your comment, I appreciate you took the time.