Logical Operators
JavaScript Fundamentals: Logical Operators
Can you name the logical operators in JavaScript?
View Answer:
What makes the logical || (OR), && (AND), ! (NOT) operators unique?
View Answer:
If an operand is not a Boolean, what does the logical || OR do?
View Answer:
/* Logical OR returns the first truthy value,
* or the last value if there are none
*/
console.log('1' || '0'); // returns 1
console.log(1 || 0); // returns 1
console.log(0 || 0); // returns 0
How does logical OR “||” function?
View Answer:
- Operands evaluate from left to right.
- Converts each operand to a Boolean value, and if the result is true, the program terminates and returns the operand's original value.
- Returns the final operand if all operands get evaluated (i.e., all were false).
console.log(1 || 0); // 1 (1 is truthy)
console.log(null || 1); // 1 (1 is the first truthy value)
console.log(null || 0 || 1); // 1 (the first truthy value)
console.log(undefined || null || 0); // 0 (all falsy, returns the last value)
Logical OR “||” finds the first truthy value or the last value if there are none.
What is the definition of a short-circuit evaluation in JavaScript?
View Answer:
true || console.log('not printed');
false || console.log('printed');
What does the Logical && (AND) return?
View Answer:
console.log(true && true); // true
console.log(false && true); // false
console.log(true && false); // false
console.log(false && false); // false
What type of conversion does the Logical && (AND) perform?
View Answer:
let x = 5;
let y = 10;
if (x > 0 && y < 20) {
console.log("Both conditions are true!");
} else {
console.log("At least one condition is false.");
}
In this example, the logical AND operator (&&
) is used to check if both x
is greater than 0 and y
is less than 20. If both conditions are true, it will print "Both conditions are true!" to the console. Otherwise, it will print "At least one condition is false."
What steps does JavaScript perform when using the Logical && (AND) operator?
View Answer:
- Operands evaluate from left to right.
- Converts each operand to a Boolean value, and if the result is false, the program terminates and returns the operand's original value.
- It returns the final operand if all operands get evaluated (i.e., all were true).
// if the first operand is truthy,
// AND returns the second operand:
console.log(1 && 0); // 0
console.log(1 && 5); // 5
// if the first operand is falsie,
// AND returns it. The second operand is ignored
console.log(null && 5); // null
console.log(0 && 'no matter what'); // 0
What are the differences between Logical || (OR) and Logical && (AND) operators?
View Answer:
let x = 5;
let y = 10;
// Logical OR (||) example
if (x > 0 || y > 20) {
console.log("At least one condition is true!"); // Logs "At least one condition is true!"
} else {
console.log("Both conditions are false.");
}
// Logical AND (&&) example
if (x > 0 && y > 20) {
console.log("Both conditions are true!");
} else {
console.log("At least one condition is false."); // "At least one condition is false."
}
Between Logical || (OR) and && (AND) operators which has higher operator precedence?
View Answer:
let a = true;
let b = false;
let c = true;
// Due to precedence, '&&' operation will be performed before '||' operation
let result = a || b && c;
console.log(result); // Outputs: true
In this case, the b && c
operation happens first due to &&
having higher precedence, returning false
. Then, a || false
is evaluated, which results in true
.
Can you replace conditional if with OR (||) or && (AND)?
View Answer:
let x = 1;
x > 0 && console.log('Greater than zero!');
// the if example is cleaner and obvious
let x = 1;
if (x > 0) console.log('Greater than zero!');
What steps does JavaScript perform when implementing the Logical! (NOT) operator?
View Answer:
- Converts the operand to a Boolean type: true/false.
- Returns the inverse value.
console.log(!true); // false
console.log(!0); // true
What happens when we apply the !! (DOUBLE NOT) to a value?
View Answer:
console.log(!!'non-empty string'); // true
console.log(!!null); // false
Is there a built-in object that performs in the same fashion as the !! (DOUBLE NOT) operator?
View Answer:
console.log(!!'non-empty string'); // true
console.log(!!null); // false
// Example of the Boolean method
console.log(Boolean('non-empty string')); // true
console.log(Boolean(null)); // false
What has the highest operator precedence over all the logical operators?
View Answer:
What values are considered falsy in JavaScript?
View Answer:
let falsyValues = [false, 0, "", null, undefined, NaN];
falsyValues.forEach(value => {
if (value) {
console.log(`${value} is truthy`);
} else {
console.log(`${value} is falsy`);
}
});
This code will output that each value in the falsyValues
array is falsy.
What is operator precedence in JavaScript?
View Answer:
How can you use Logical Operators to simplify complex conditions?
View Answer:
Let's consider this JavaScript example where you need to check if a user is valid.
Without logical operators:
let userName = "John";
let userAge = 20;
if (userName !== "") {
if (userAge >= 18) {
console.log("User is valid");
} else {
console.log("User is not valid");
}
} else {
console.log("User is not valid");
}
Now, the same thing with logical operators:
let userName = "John";
let userAge = 20;
if (userName !== "" && userAge >= 18) {
console.log("User is valid");
} else {
console.log("User is not valid");
}
As you can see, the code is more simplified and readable when using logical operators.