loading...

JavaScript Or Operator JavaScript: Logical operators and Boolean Values

banesag profile image Banesa Guaderrama ・2 min read

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

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

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

&& (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

|| (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

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.

Posted on by:

banesag profile

Banesa Guaderrama

@banesag

GATech Coding Bootcamp with Industrial Engineering and Business background

Discussion

markdown guide
 

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";
 

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.

 

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

 

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

 

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

 

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.

 

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