NOTE: I have added the regex tag based on help I got on Stackoverflow in the few hours since writing this, please see my comment, the first, below (I didn't think it warranted a whole separate sequel/post). Regex's could well be "The King of Less is More" 👑
ALSO ADDING VUE TAG: I since realized that a post of mine from a week ago regarding nesting Vue methods also falls into the "less is more" category. See https://dev.to/dexygen/grouping-related-methods-together-in-an-object-in-vue-1ie0 or for the tl;dr just go here: https://stackoverflow.com/a/59614452/34806
In 2017 when my title was Application Developer IV I stumbled across some code written by an Application Developer III (so I was one level senior and I think it was the kind of place that tied those titles to your pay grade) such as the following:
if (foo === 'bar') {
return true;
}
else {
return false;
}
It had been probably a decade since I'd ever written anything like that, I hope he brought other redeeming qualities to the table, because if he did that with any regularity, I was certainly at least 2 levels senior to him, in my opinion. Of course that should be re-written in the following "less is more" fashion:
return foo === 'bar';
A related example is as follows. You might be returning a particular value from within an if statement, and if the condition is not met, you otherwise return false. Here's the first potentially unnecessarily long way:
if (foobarbaz) {
return foo === 'bar';
}
else {
return false;
}
Unless you need to do some processing within the else block, it isn't strictly necessary and you could write it like as follows:
if (foobarbaz) {
return foo === 'bar';
}
return false;
Indeed I started writing code such as the above just this morning. However, unless you are explicitly testing the return value with ===false, even return false is unnecessary, as a function will otherwise implicitly return the falsy undefined, in which case we could potentially tighten up the code even further with the following as the last statement of a function:
if (foobarbaz) return foo === 'bar;
For the current user story I'm working on I've probably written a couple of things in a "less is more" fashion, but the following didn't start out that way but rather as your typical if/else construct, not unlike the code I disparaged above 😜 By the way, below is how I tend to write legible ternary statements if they become too long, but maybe because it's spread over more lines you don't think this is a case of "less is more"? Except that it's one statement, and the "lines of code" (LOC) metric is, in my opinion, ridiculous. In fact, particularly when I'm maintaining code, I'm usually shrinking the size of the code base, yet I digress; rather the point is, the following is arguably better than using if/else's:
toggleShowAttachmentsPanel() {
// Keep panel open as long as there are attachments
this.attachments.showPanel = this.attachments.showPanel ?
this.attachments.selected.length !== 0
:
true;
}
Also note that, since this is not your typical toggle function
(showPanel = !showPanel) I added a comment.
One last example, I don't know what the alternative might be as I've been doing this for so long, in fact since implementing something akin to Promise.all at the beginning of last decade. And in fact I was doing something similar to back then, making XHR calls in a loop. We've mostly been using axios.all for this, but this was trickier in that they weren't distinct calls to separate endpoints, but rather consecutive calls to the same endpoint, with different parameters on each call, and I just didn't have the time to figure out how to make that work (I've been on this story over the course of parts of 2 sprints 😢) and we already had some existing jQuery code that I was converting that did the same thing in a loop, so I took the path of least resistance.
First I set a variable equal to the length of the array I'd be iterating over:
// will get decremented until reaching 0 when this.sendEmail() will be called
let attachmentUploadsPending = this.attachments.selected.length;
Again, notice the comment; I think it makes it easier to understand how I then perform a "count-down" from that value within axios.then: I use logical not (!) against the value returned by the prefix form of the decrement operator (--) (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement), logical not of course returning true for 0, since 0 is falsy.
if (!--attachmentUploadsPending) this.sendEmail();
I hope I haven't rambled on too much, ironically that would go against the "less is more" principle. But bedtime is fast approaching, and as Mark Twain is accredited to have said/written: "I didn't have time to write a short letter, so I wrote a long one instead.": https://www.goodreads.com/quotes/21422-i-didn-t-have-time-to-write-a-short-letter-so
Top comments (1)
As noted in the last paragraph above I was tired, but still not being able to get to sleep I decided to put in a little effort that would apply to work. I got something working pretty succinctly with pure Javascript but was pretty sure it could be improved or at least shortened using a regex. So I asked on Stackoverflow went to sleep and lo and behold upon awaking 6 hours later (I usually get 8.5 so please don't chide me about not sleeping enough 😜) received the following answer: stackoverflow.com/a/59727357/34806 Regex's may well be the "King of Less is More" 👑