DEV Community

7 Shorthand Optimization Tricks every JavaScript Developer Should Know 😎

Tapajyoti Bose on October 30, 2022

Every language has its own quirks and JavaScript, the most used programming language, is no exception. This article will cover a plethora of JavaSc...

Read full post

Exo Des • Oct 30 '22

I think the the fallback values need some correction. Using logical OR || doesn’t give you the value you want if the value is [] or 0. The better solution would be using the nullish coalescence ?? where if only use the fallback values when the defined value is null or undefined.

Rich Winter • Nov 1 '22

☝️

Erian • Nov 5 '22

☝️

Oliver Kühn • Nov 5 '22

☝️

Emre Birkan Kervan • Nov 8 '22

☝️

pogpog • Nov 9 '22

☝️

Gabriel Andres • Nov 24 '22

☝️

Ben Sinclair • Oct 30 '22

In point 1, everything's fine, but you make the "long hand" version look longer by adding a redundant if.. else. This would be a better comparison:

// Long-hand
const isVowel = (letter) => {
  return (
    letter === "a" ||
    letter === "e" ||
    letter === "i" ||
    letter === "o" ||
    letter === "u"
  );
};

In point 4 I would recommend against nesting ternaries because you quickly get an unreadable mess of code, especially when the lines contain long strings which wrap in your editor.

Posandu • Oct 30 '22

Nice post!

The 5th can be changed as follows

function f1() {
    // ...
}
function f2() {
    // ...
}

conditon ? f1() : f2();

And the 6th can be improved by using Arrays

const dayNumber = new Date().getDay();

const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];
// Or
const days = `Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday`.split(
    ","
);

const day = days[dateNumber];

Frank Wisniewski • Oct 30 '22

    const weekday = new Intl.DateTimeFormat('de-DE',{weekday: 'long'}).format(new Date())

Rich Winter • Nov 1 '22

Suggestion is a bit of a "premature optimization" - you just created a string " Sunday" instead of "Sunday"

With something like this, sometimes the longer way is just easier for the next guy to read. Especially when that next guy is you.

Sam oo Líng • Oct 31 '22

(condition ? f1 : f2)();

Is a new thing for me, but why'd you suggest

conditon ? f1() : f2();

instead?

Posandu • Oct 31 '22

If you need to add different arguments to each function call. You can't do it from the 1st method.

Sam oo Líng • Nov 1 '22

ah so that's why..

Gorisso-manuchi • Nov 4 '22

hi my friend

Sam oo Líng • Nov 5 '22

hello too

Undefined Dev • Nov 1 '22 • Edited

Good job with the article, but I do have some things to say:
For #7, I'd rather go with the nullish coalescing operator(??) than ||...
And for #4, wouldn't it be a good idea to talk about why someone shouldn't use ternary operators too much as well, i.e., nested ternary operators can be a nightmare for readability, and recommending against it would be good for people who are learning about ternary operators.

Alex • Nov 2 '22

Nested ternary would never pass my code review. IMO, one-liner is not an optimization if it affects readability.

Even though your #1 example is more general, this specific case can be shortened:

const isVowel = (letter) =>
  'aeiou'.indexOf(letter) > -1

Nishith Savla • Nov 10 '22

I resist from using indexOf as you can instead use includes

'aeiou'.includes(letter)

Roland Taylor • Nov 7 '22

Some great tips here! Thanks for sharing!

StefanTheSpider • Nov 4 '22

I miss the unicorn 🥲

WebSharp • Nov 4 '22

thanks for sharing this stuff

Madza • Nov 2 '22

Some great tips right here, thanks 👍💯

Horace FAYOMI • Nov 3 '22

This is Great

Wilmela • Nov 1 '22

Cool

Timothy Huang • Nov 3 '22

Interesting and useful, thanks for sharing.

Renzo Osorio • Nov 2 '22

Good article, thanks

Jayanika Chandrapriya • Nov 2 '22

Nice post 🤩

Rafael Corrêa Gomes • Nov 2 '22 • Edited

Great tips; Thanks for sharing it!

Baltasar Aguirre • Nov 2 '22

Great post!! Thanks!!

Peter Ellis • Nov 1 '22

If I can add a personal request: yes, ternary operators are cool and useful but please, please, please try to avoid using nested ternary operators like in this example.

Don't get me wrong, they work just fine but they are relatively difficult to read and they don't auto-format very well.

(You might say It's not that much harder to read, and I don't disagree much, but it's always useful to remember that code is only written once but read many times, so any time saved on writing that makes reading harder is likely to end up costing you more overall.)

Uttam Sharma • Oct 30 '22

thank you, It was a nice post

Jerome Cukier • Nov 2 '22

I don't think the includes approach can be faster than multiple ors for such a small list of values.
Array.prototype.includes, as Array.prototype.indexOf, is going to have a tiny overhead over just checking if the value is equal to the first item, then the next, then the next, etc.
I'm also not sure it is more legible.

If the use case is to check if a string contains vowels, a regular expression is going to be both much faster and more concise. ie myString.search(/[aeiou]/)

Alex Lohr • Nov 3 '22

Most of your solutions have worse performance and sometimes different functionality. For example, a classic for-loop will execute even for the undefined items in sparse arrays; neither for-of nor array.prototype.forEach will do that.

Also, your function call shorthand requires that you are careful with semicolons, because otherwise, you might run into a TypeError: undefined is not a function when the previous statement also ended with brackets.

Vidip Ghosh • Nov 2 '22

Very useful.

Pankaj • Nov 6 '22 • Edited

Number#4 should be avoided. Using ternary for something like that makes your code complex/hard to read. Please don't teach wrong practices as most of the newbies read these articles and start writing the bad code.

Number#5 should also be corrected as highlighted in other comments.

Haven't checked after #5 as I'm convinced after reaching the 5th point that this article lacks the actual and practical knowledge by the author and not worth reading.

Enes Kaplan • Dec 1 '22

For #2, instead of for-in, you can also use

Object.entries(myObject).forEach(([label, value]) =>{
    // do something..
    console.log(label, value)
})

For #4, I think nesting ternaries reduces readability and when you come back to it, or someone else tries to understand it, it introduces a lot of mental overhead.

Christian Biggins • Nov 7 '22

Thanks for this. Very helpful tips.
Note that I do think that code readability needs to be taken into consideration before using any available shortening option. Some of the examples above could add a perceived level of complexity and might have an unhelpful impressions on the dev.

Julian Engleheart • Nov 2 '22

I’d suggest that any nested conditional statement can carry a heavy cognitive load. The author of this piece is demonstrating chained ternaries, where there is a single code path (no nested branching) that will return a value as soon as a condition is met or finally a default value if no conditions are met. A ternary expression is a different animal to if..else or switch statements, and it would be shame to see it thrown out in cases where it is the more suitable solution. There is an article by Eric Elliott on this subject.

Damian Cyrus • Oct 30 '22

I would like to use #1 so many times, but it does not work with TypeScript, or is it just me 🤔

eshimischi • Oct 30 '22

Just you. fettblog.eu/typescript-array-inclu...

Damian Cyrus • Oct 31 '22

Thanks @eshimischi, just like in the post described: it should work.

Too bad I don't get why it is not working in my last project with TS 4.8. Maybe it is a Windows environment thing ;)

eshimischi • Oct 31 '22

Well it has nothing to do with a Windows environment, i’ll check it myself and let you know, mac is here

Damian Cyrus • Nov 1 '22

I checked the code, and it looks like the issue was a type compatibility issue:

const getVowel = (letter: string): '' | 'a' | 'e' | 'i' | 'o' | 'u' => {
  // simple condition
  if (
    letter === 'a' ||
    letter === 'e' ||
    letter === 'i' ||
    letter === 'o' ||
    letter === 'u'
  ) {
    return letter; // ✅ (parameter) letter: "a" | "e" | "i" | "o" | "u"
  }
  // includes condition
  if (['a', 'e', 'i', 'o', 'u'].includes(letter)) {
    return letter; // ❌ (error) Type 'string' is not assignable to type '"" | "a" | "e" | "i" | "o" | "u"'.
  }
  return ''; ✅
};

In this case TypeScript found in the simple condition the value and returns the right typed value.

In the includes condition the type of the variable is still string, and it could not find the correct value type.

From my view TypeScript is doing the right thing: it takes the original type (string) and does not modify the type in the second condition. In this case we use a form input onChange value, that is a string. Making it strict would mean we would need to convert the string type to the return type and that leaves us only with the multiple ||, as long as .includes() can't find the type like before.

eshimischi • Nov 1 '22

That’s what i was about to say.. Typescript, i mean, has some extra work to do always

Miko • Oct 30 '22

Hi, cool art. Why in point 6 there's double check days[dayNumber]?

Tapajyoti Bose • Oct 30 '22

Yeah, that was unnecessary, thanks for pointing out! Got it fixed

Tomas Rimkus • Nov 2 '22

Never ever use nested ternary operators. It's a stinking unreadable mess.

Kari Ikonen • Nov 6 '22

Tip on ternary operation was bit on line "how to obfuscate code" line... Nested ternary operations make code harder to read, and resistant to change; if logic need to be changed, have to likely tear down first whole ternary operator mess to first of all understand logic, and secondly to be able to make logic change.

Alvison Hunter Arnuero | Front-End Web Developer • Nov 5 '22 • Edited

Multiple string checks Alternative approach

const isVowel = letter => !!letter.match(/[aeiou]/g, '');

wkylin.w • Nov 3 '22

const name = user?.name ?? "Anonymous";

Larisa00dila • Nov 1 '22

Hey

Rich Winter • Nov 1 '22

OHAI

Jon Randy 🎖️ • Oct 30 '22

The day number example wasn't the best choice. This would be easier with an array