DEV Community

Ruben Gabrielyan
Ruben Gabrielyan

Posted on

Stop Writing JavaScript Like This

Most of us are used to writing JavaScript code for a long time. But we might not have updated ourselves with new features which can solve your issues with minimal code. These techniques can help you write clean and optimized JavaScript Code. Today, I’ll be summarizing some optimized JavaScript code snippets which can help you develop your skills.

1. Shorthand for if with multiple || conditions

if (fruit === 'apple' || fruit === 'orange' || fruit === 'banana' || fruit ==='grapes') {
    //code
}
Enter fullscreen mode Exit fullscreen mode

Instead of using multiple || (OR) conditions, we can use an array with the values and use the includes() method.

if (['apple', 'orange', 'banana', 'grapes'].includes(fruit)) {
   //code
}

Enter fullscreen mode Exit fullscreen mode

2. Shorthand for if with multiple && conditions

if(obj && obj.address && obj.address.postalCode) {
    console.log(obj.address.postalCode)
}
Enter fullscreen mode Exit fullscreen mode

Use optional chaining (?.) to replace this snippet.

console.log(obj?.address?.postalCode);
Enter fullscreen mode Exit fullscreen mode

3. Shorthand for null, undefined, and empty if checks

if (first !== null || first !== undefined || first !== '') {
    let second = first;
}
Enter fullscreen mode Exit fullscreen mode

Instead of writing so many checks, we can write it better this way using ||
(OR) operator.

const second = first || '';
Enter fullscreen mode Exit fullscreen mode

4. Shorthand for switch case

switch (number) {
  case 1:
     return 'one';
  case 2:
     return 'two';
  default:
     return;
}
Enter fullscreen mode Exit fullscreen mode

Use a map/ object to write it in a cleaner way.

const data = {
  1: 'one',
  2: 'two'
};
//Access it using
data[num]
Enter fullscreen mode Exit fullscreen mode

5. Shorthand for functions with a single line

function doubleOf(value) {
  return 2 * value;
}
Enter fullscreen mode Exit fullscreen mode

Use the arrow function to shorten it.

const doubleOf = (value) => 2 * value
Enter fullscreen mode Exit fullscreen mode

Buy me a coffee

Latest comments (39)

Collapse
 
ravavyr profile image
Ravavyr

These are good tips:

  1. The performance difference is irrelevant, the array includes way feels cleaner but is actually harder to read because you don't immediately see what you're comparing the value to, and the more items in the list, the farther away the variable is visually so it actually makes the code harder to understand for even slightly more complex lists.

  2. Optional chaining is terrible terrible and let me say it again, terrible.
    See. If obj?.address?.postalCode fails, you don't know if obj doesn't exist, or obj.address doesn't exist or if it's just the obj.address.postalCode that's missing.
    This WILL [not can] lead to problems where no error happens even though an important piece of information is missing and debugging it is a mess where you end up splitting it up anyway so it's better to validate each part of the object exists before using it.

  3. You'll never do second=first....if so you would just use "first" in the first place.
    That scenario literally never happens unless you're writing extra code and creating extra variables you don't need.

  4. I like this one, i usually use arrays for it, but objects work too.

  5. If a function has one line in it...it shouldn't be a damn function. That level of abstraction makes systems a bloody nightmare to debug because you're jumping 20 functions deep to find the culprit and often in 20 different files. Just KISS dammit.

Collapse
 
alexhutchisondev profile image
AlexHutchison-Dev

Owning an iPhone doesn’t mean you have to use safari, it is the default sure but you can install Firefox, brave, or if spyware is your jam Chrome.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

But those browsers all use the Safari engine under the hood, Apple won't allow anything else

Collapse
 
mynameisxue profile image
XueZC

let first = 0
const second = first || ''
second // ''

Collapse
 
mastodonnine profile image
Mastodon9

Where can you learn more tricks like this?

Collapse
 
pavelloz profile image
Paweł Kowalski

Its impossible to respond in a thread after some levels of nesting so I will just go and post in top level adding to one part of it:

So many JS articles have people in the comments section bickering about performance and citing arbitrary benchmark metrics as proof.

I also think people think about "performance" too narrowly. Developers performance matters. Especially since JIT compilers progress every year and find new ways of applying those microoptimizations. In the IE days it was very often the case that one microoptimization would be an antipattern next version, because engine strategy was so much better.

 
peerreynders profile image
peerreynders • Edited

Globally Apple has a 15% Marketshare, 53% in North America, 32% in Europe — those users are locked into a "shitty browser" and not willing to forego their other creature comforts they are not going to switch brands on your account.

Meanwhile Chrome even on desktop has a reputation for being CPU and memory hungry. Apparently some people want lighter-weight alternatives. One has to wonder how pessimized JavaScript performs on Google GO on a "shitty phone".

 
peerreynders profile image
peerreynders • Edited

iPhone 6s Plus iOS 14.7.1
jsbench results
perflink results

While Safari is primarily to blame here, this phone's CPU is still better than what's on a lot of contemporary run-of-mill android phones.

2019 Geekbench scores

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli

Strong disagree on using => over function. You'll have a confusing time with this.

Collapse
 
antonmelnyk profile image
Anton Melnyk

You should not use "this" in modern JavaScript in the first place.

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli

Because?

Thread Thread
 
ifarmgolems profile image
Patrik Jajcay

Because it doesn't promote arguably better immutable state.

But hey, it's a bold statement and I wouldn't say it always applies.

Collapse
 
macsikora profile image
Pragmatic Maciej

Such posts always inspire me to write another article why radical opinions are always wrong.

 
akashkava profile image
Akash Kava

Android has V8 engine so it performs same as desktop, Safari and Firefox has different results.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.