Boolean Operators

Boolean Operators

Boolean operators help manage true and false values. They are most useful in if statements and the like, but they also have some interesting uses in and of themselves.

Logical NOT: !

The logical NOT operator turns a “truth” value into false and a false value into true. It’s another way of determining inequality. These two if statements operate identically :

if (myVar != true) {
// It's not true
}

if (! myVar) {
// It's still not true
}

It’s useful for determining that something isn’t true or that it’s missing.

var element = document.getElementById("myId");
if (! element) {
console.log("The element does not exist");
}

Logical AND: &&

The logical AND operator (&&) takes two operands. It returns the right operand only if the left operand is  truth.  If the left operand is false , it returns that value.

var tValue = 1;
var fValue = null;

true && tValue;   //   1

fValue && tValue;   //   null

The interesting thing about the logical AND operator is that it stops evaluating
and immediately returns if the left operand is “falsey.” Consider this example :

function myFunc() {
alert("executing myFunc!");
return true;
}

falseyValue && myFunc();  //  null

Because the left operand is “falsey,” the expression stops there and doesn’t execute myFunc(). In this case, you’ll never see the alert dialog box. This is useful for safeguarding yourself against potential errors. JavaScript will throw an error if you try to access a property on null.

var element = document.getElementById("doesNotExist");
element.nodeName;
TypeError: element is null
element && element.nodeName;
null
var element2 = document.getElementById("exists");
element2 && element2.nodeName;
"DIV"

Evaluating the nodeName property of a nonexistent element returns an error, but you can quickly determine whether the element exists with the logical AND operator.

Logical OR: ||

The logical OR operator (||) returns the left operand if it’s true, and the right operand otherwise. You can think of it as “Keep trying until you find the truth (or something like it).”

fValue || tValue;    // Second value
1
tValue || fValue;    // First value
1
false || fValue || anotherFalseValue || tValue;
1

Combining Boolean Operators

The fun part of Boolean operators comes from combining them to create complex logical expressions.

var element = document.body.firstChild;
if (element &&
(element.nodeName === "DIV" ||
element.nodeName === "SPAN") &&
element.childNodes.length) {
alert("All of these expressions are true");
}

Learning to read and write complex expressions like this is a challenge,
but it just amounts to understanding the smaller expressions one at a
time. Sometimes it helps to store some of the smaller expressions on
variables to enhance readability.

var isDiv = element && element.nodeName === "DIV"
var isSpan = element && element.nodeName === "SPAN";
var isDivOrSpan = isDiv || isSpan;
if (isDivOrSpan && element.childNodes.length) {
alert("All of these expressions are true");
}

Coding often requires balancing the number of lines and the readability of the code.

Ternary Expressions

Ternary expressions are a slightly more efficient way to manage values based on booleans. they let you write a basic if/else statement in one line of code.

result = expression ? "it's true" : "it's false";

This expression is equivalent to the following:

if (expression) {
result = "it's true";
} else {
result = "it's false";
}