DEV Community

🦸‍♂️ 11 JavaScript Tips and Tricks to Code Like A Superhero (Vol.2)

Orkhan Jafarov on January 18, 2021

Hi JS-heroes! Finally done with this new article! Let's go ahead ✨ 1. Generate a list with random numbers We need A LOT of fake data, f...
Collapse
 
crimsonmed profile image
Médéric Burlet

One that I love is this:

const someVar = null
const myValue = someVar || "default text"
Enter fullscreen mode Exit fullscreen mode

The or operator works the same as an elvis operator.

This is useful if you want to display a default value when you can't get data from an api or if some data is null for a key.

This can be chained with objects

const someVar = {foo: {bar: null}}
const myValue = someVar?.foo?.bar || "default text"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lesleyvdp profile image
Lesley van der Pol • Edited

Love this one too, it's also useful to prevent errors when destructuring something that could be undefined:

const { foo, bar } = couldBeUndefined || {};
Enter fullscreen mode Exit fullscreen mode

This can prevent errors such as "Cannot read foo of undefined".

Collapse
 
lampe profile image
Micha

With ES2021 we have ||= :)
Which makes the syntax even cooler

I made a video about new features here:
youtu.be/hxmFYToenxE

Collapse
 
crimsonmed profile image
Médéric Burlet

True but not fully supported yet

Thread Thread
 
lampe profile image
Micha

With the right babelJS version it is ;)

Thread Thread
 
crimsonmed profile image
Médéric Burlet

And then you're bringing big pieces of extra code for not much 😉 good way to slow websites.

Thread Thread
 
grzesiekgs profile image
Grzesiek Dunin-Ślęczek

I would say that developer convenience is more than a lot. Also, few bytes of code for polyfill, definitely will not slow down the website.

Thread Thread
 
crimsonmed profile image
Médéric Burlet

I tend to think of client first. UX is more important than writing one word less. for a developer. between users having slow internet speeds, limited networks and not the greatest machines bringing one poly-fill here and there vs zero can make a huge difference. If you are making something just for you or limited public then why not but the difference in code between the statement I used vs using ||= is not that big that it would justify using a poly-fill on my end. If we were talking about a promise polyfill for example that would be a different matter.

But in the end everyone codes differently. So whatever suits your coding style then use it.

Collapse
 
andrewcourtice profile image
Andrew Courtice

Great article!

It's worth noting that the first 2 examples can be written ever so slightly shorter using Array.from as the Array.from method supports a mapping function as it's second argument.

Here's the first example using Array.from:

Array.from({ length: 1000 }, Math.random)
Enter fullscreen mode Exit fullscreen mode

And the second example:

Array.from({ length: 1000 }, (v, i) => i)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
orkhanjafarovr profile image
Orkhan Jafarov

You're right! This way is slightly shorter! I'll replace mine with them
Thank you mate!

Collapse
 
ogheneovo12 profile image
ogheneovo12

Here is what I use

[...Array(1000).keys()]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
crimsonmed profile image
Médéric Burlet
Collapse
 
renzos profile image
Renzo

In the case of no. 5: I would always chose readability over bitwise trickery, when not absolutely necessary. So instead of bitwise AND, just use modulo;

const value = 232;  

if (value % 2) console.log("odd");
else console.log("even");
// even
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chadgauth profile image
Chad Gauthier

Hey just a small improvement to N something ago example to show/hide plural.

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);
  let ago;

  if(seconds < 60)
    ago = `${seconds} second"`;
  else if (minutes < 60)
    ago = `${minutes} minute`;
  else if (hours < 24)
    ago = `${hours} hour`;
  else if (days < 30)
    ago = `${days} day`;
  else if (months < 12)
    ago = `${months} month`;
  else
    ago = `${years} year`;

  const isSingular = ago.indexOf("1 ") === 0;

  ago += isSingular ? " ago" : "s ago";
  return ago;
}

const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 days ago
Enter fullscreen mode Exit fullscreen mode
Collapse
 
fvlasenko profile image
Fedor Vlasenko
const generatePathQuery = (path, obj) =>`${path}?${new URLSearchParams(obj).toString()}`;
const link = generatePathQuery("/user", { name: "Orkhan", age: 30 });
console.log(link);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
reflexgravity profile image
Joel D Souza
case days < 30:
      return `${days} day(s) ago`;

Enter fullscreen mode Exit fullscreen mode

This will not work for months with 31 days.

Collapse
 
orkhanjafarovr profile image
Orkhan Jafarov • Edited

It's a just simple version for that formatter. That's why it shows average time.
But it's okay with 31 days. If it's more than 30 days then 1 month;

example

new Date(2021, 0, 31); // now - 2021-01-30T20:00:00.000Z
const createdAt = new Date(2021, 0, 1); // 2020-12-31T20:00:00.000Z
fromAgo(createdAt); // 1 month(s) ago
Enter fullscreen mode Exit fullscreen mode

You can also replace Date.now() with your own date to check with date.getTime()

Collapse
 
aligulmaliyev profile image
Ali Gulmaliyev

Thanks for your work.

Collapse
 
larsolt profile image
Lars

Array.from() is amazing! I always used new Array(10). Thanks :)

Collapse
 
mantiq profile image
A.Z.

Great article :D