The logical AND operator

The logical AND operator (&&) in JavaScript accepts two operands. If its left-side operand is truthy, then it will evaluate and return the right-side operand; otherwise, it will return the left-side operand:

0 && 1; // => 0
1 && 2; // => 2

It can be a confusing operator for many people because they wrongfully assume that it is equivalent to the question Are both A and B true? when, in fact, it is more akin to If A is truthy then give me B; otherwise, I'll settle for A. People may have an assumption that JavaScript will evaluate both operands, but it in fact will only evaluate the right-side operand if the left-side operand is truthy. This is known as short-circuit evaluation. And JavaScript will not cast the resulting value of the operation to Boolean: instead, it'll just give us that value back, unchanged. If we were to implement the operation ourselves, it might look something like this:

function and(a, b) {
if (a) return b;
return a;
}

Given a simple operation, such as making an if(...) statement conditional upon two values being truthy, the && operator will behave in an entirely unsurprising and expected way:

if (true && 1) {
// Both `true` and `1` are truthy!
}

However, the && operator can be used in more interesting ways too, such as when needing to return a value but only if some prior condition is met:

function getFavoriteDrink(user) {
return user && user.favoriteDrink;
}

Here, the && operator is being used in a non-Boolean context, where there is no coercion of its result occurring. In this case, if its left-side operand is falsy (that is, if user is falsy), then it will return that; otherwise, it will return the right-side operand (that is, user.favoriteDrink):

getFavoriteDrink({ favoriteDrink: 'Coffee' }); // => 'Coffee'
getFavoriteDrink({ favoriteDrink: null }); // => null
getFavoriteDrink(null); // => null

The getFavoriteDrink function behaves in a way that fulfills a basic contract, returning favoriteDrink if the user object is available and if the favoriteDrink property appears on that object, although its actual functionality is a little more chaotic:

getFavoriteDrink({ favoriteDrink: 0 }); // => 0
getFavoriteDrink(0); // => 0
getFavoriteDrink(NaN); // => NaN

Our getFavoriteDrink function is not making any deliberations about the specific nature of the user or favoriteDrink values; it is just blindly yielding to the && operator, returning either its left-side or its right-side operand. If we are confident in the potential values of our operands, then this approach may be fine.

It's important to take the time to consider the possible ways that && will evaluate the operands you provide it with. Take into consideration the fact that it is not guaranteed to return Boolean and is not guaranteed to even evaluate the right-side operand.

The && operator, thanks to its short-circuiting nature, can also be used to express control flow. Let's consider a scenario in which we wish to call renderFeature() if the isFeatureEnabled Boolean is truthy. Conventionally, we may employ an if statement to do this:

if (isFeatureEnabled) {
renderFeature();
}

But we could also employ &&:

isFeatureEnabled && renderFeature();

This and other unconventional usages of && are typically frowned upon because they can obscure the intention of the programmer and create confusion for readers of your code who may not have such a thorough understanding of how && operates in JavaScript. Nonetheless, the && operator is truly powerful and should be used when well-suited to the task at hand. You should feel empowered to use it as you wish but always be aware of how the typical reader of your code may see the operation and always consider the prospective values that the operation may produce.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.93.141