Two weeks ago, we took a look at a reader's code in JS Quick Hits 34 - Reader Question - Array.reduce. I refactored the code to a single line using a ternary operator, but my friend Thom pointed out that there's actually an even shorter way to do it by using a simple logical operator. Specifically, like this:
card.reduce((memo, Card) => memo + parseInt(Card.hrs || 0), 0);
So, what's happening there? Well, we know we want
memo to either have
Card.hrs or zero added to it. What we're taking advantage of, here, is a shortcut that you can use if one of the options of your ternary operator is just to return the data being compared. So if your ternary operator looks like this:
const hours = Card.hrs ? Card.hrs : 0;
you can shorten it to:
const hours = Card.hrs || 0;
Those double-bars are an
or logical operator, meaning "Card.hrs or zero." You're probably most used to seeing logical operators in
In the above reducer code, we also move the shortcut into the
parseInt function (which we could also do with a ternary operator), since in either case we're going to want a numerical return value, and running
parseInt on zero just gives, well, zero. This keeps us from having to write the following, more confusing code:
card.reduce((memo, Card) => memo + (parseInt(Card.hrs) || 0), 0);
That's not as good as the code above, although it's still arguably less confusing than a full ternary operator is!
There are a lot of places you can use this kind of shortcut. Let's take a look at another quick example, one which you might've used before without even really thinking of it as a shortcut:
const enableButton = input.val && input.val.length > 1;
What this is saying is, "if the
input object has a
val property, and if that property's length is greater than
true. Otherwise, return
… which can also be expressed as a ternary operator, like this:
const showButton = input.val && input.val.length > 1 ? true : false;
console.log(5 > 1 && 10 > 6); // true console.log(5 > 1 && 10 < 6); // false console.log(5 > 1 || 10 > 6); // true console.log(5 > 1 || 10 < 6); // true
Note that the last one is true because we've used the "or" symbol, so only one of the two conditions needs to be true in order for the full expression to return true.
So, I hope this lesson brings you two reminders: the first is that comparisons are generally handy and worth considering while writing your code. The second is that there's often room for refactoring and simiplifcation even in refactored code!
As always, you can download example files for each of these tutorials from the JS Quick Hits github repo.
Enjoying these quick hits? You can get them five days early by subscribing to our weekly newsletter.