DEV Community

Cover image for 8 JavaScript Tips & Tricks That No One Teaches πŸš€

8 JavaScript Tips & Tricks That No One Teaches πŸš€

Garvit Motwani on April 06, 2021

JavaScript is no doubt one of the coolest languages in the world and is gaining more and more popularity day by day. So the developer community has...
Collapse
 
devtalhaakbar profile image
Muhammad Talha Akbar • Edited

Great, Garvit! It's always great to know the language so well and bring about these unconventional ways to solve problems. However, it's always recommended to write code that is self-explanatory. And, I find majority of these tricks to be confusing (to an average eye). Use them when you really have to and leave a comment to make your intention clear.

Collapse
 
strativd profile image
Strat Barrett

On that note – which I completely agree with – it's interesting how readable this is Array.from(dogs) compared to dogs.map() if map wasn't so widely adopted :)

Collapse
 
arealsamurai profile image
An actual, Real Samurai • Edited

On that note, I'd love to see how performant Array.from() is compared to .map() that I know doesn't perform very well

Thread Thread
 
killshot13 profile image
Michael R.

Now you've inspired a more ambitious project. Building a custom standalone performance measurement tool for Javascript.

It could be something similar to Runkit, but strictly for benchmarking the various methods and approaches to the same end goal. Like which is faster?

capsLockNames = names.map(capitalize)
Enter fullscreen mode Exit fullscreen mode

OR

capsLockNames= []
for x = 0; x < names.length; x++
  capsLockNames[x] = capitalize(names[x]))
Enter fullscreen mode Exit fullscreen mode

πŸ€”πŸ€”πŸ€”

Thread Thread
 
arealsamurai profile image
An actual, Real Samurai

I can tell you for sure that the for loop is way more performant than map. But if you do compare everything, I'm definitely interested to read.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Noted! and thanks for reading the article!

Collapse
 
davidsanwald profile image
Info Comment hidden by post author - thread only accessible via permalink
David Sanwald

Map an array without .map()

Pick one. You can't say one is difficult and complicated and nobody will understand it.
And the other one is surprising, rarely taught or known but way easier to understand?

Collapse
 
garvitmotwani profile image
Garvit Motwani

Actually, I really like that method and it is way easier than .map(), that's why I recommended that, but noted! Thanks for reading the article

Collapse
 
nickjohnmorton profile image
Nick Morton

Please explain how your method is "way easier than .map()"?

I just don't understand your thinking here, the concepts are exactly the same, the syntax is almost exactly the same (actually longer), and you're introducing a somewhat unfamiliar syntax to most to achieve something that everyone likely understands already with .map().

Collapse
 
shadowtime2000 profile image
Info Comment hidden by post author - thread only accessible via permalink
shadowtime2000

8 JavaScript Tips & Tricks That No One Teaches πŸš€

This title makes it seem like these are tips and tricks worthwhile to use that are not that popular but extremely useful.

Most of these tips are actually well known among JS developers and aren't ones "That No One Teaches", such as the performance tip, the short for loop, using sets to remove duplicates from arrays, and swapping values with destructuring. The only ones that aren't as known are the first couple, which don't seem to be that useful.

Sorry, if that sounds rude because that isn't my intention. I am just trying to point out that most of these tips are either well known or not useful and the title is pretty misleading then.

Collapse
 
johannchopin profile image
johannchopin

You're right and I like your avatarπŸ‘

Collapse
 
garvitmotwani profile image
Garvit Motwani

Thanks! I don’t remember how I created that

Collapse
 
garvitmotwani profile image
Garvit Motwani

Noted

Collapse
 
sonterix profile image
Nick • Edited

Also, u can convert number to string in this way:

const num = 32
const str = `${32}`
Enter fullscreen mode Exit fullscreen mode
Collapse
 
garvitmotwani profile image
Garvit Motwani

That is interesting and thanks for sharing!!

Collapse
 
aalencar profile image
Alexandre Alencar

or

num + ''

Collapse
 
sonterix profile image
Nick

This method described in the article :/

Collapse
 
vladimirc profile image
Vladimir C

I believe you meant

const str = `${num}`
Enter fullscreen mode Exit fullscreen mode
Collapse
 
peerreynders profile image
peerreynders

Array.from is notable for its intended use of making Array-like data iterable with array methods, such as strings.

There's another case where it is extremely handy - creating a fresh array with elements initialized from a function.

const init = (_value, index) => (index + 1) * 3;
const length = 4;
const array = Array.from({ length }, init); // [3, 6, 9, 12]
for (let i = 0; i < length; i += 1) console.assert(array[i] === (i + 1) * 3);
Enter fullscreen mode Exit fullscreen mode

The issue with Array.prototype.fill() is that:

  • it requires an existing array (to modify)
  • it only places a single constant value into all the elements it replaces.

And Array.prototype.map() requires an already initialized array.

With Array.from() an array can be created and initialized with element content that varies by index in one fell swoop.

Collapse
 
lkarabeg profile image
lkarabeg

I kind of disagree, finding map much more readable.
Array.from({length: 4}).map((_value, index) => (index + 1) * 3)

Thread Thread
 
peerreynders profile image
peerreynders

With

const array = (new Array(length)).fill().map(init);
Enter fullscreen mode Exit fullscreen mode

it always ground my gears that to arrive at the desired array another disposable array had to be created and "filled" just to convey that I want length elements. And

const array = (new Array(length)).fill();
array.forEach((_v, i, a) => {
  a[i] = (i + 1) * 3;
});
Enter fullscreen mode Exit fullscreen mode

was clunky enough to make me want to use a for loop.

So if I'm are already using Array.from() I might as well use the optional mapFn and thisArg parameters.

function init(_value, index) {
  return (index + 1) * this.factor;
}

const config = { length: 4 };
const two = { factor: 2 };
const three = { factor: 3 };
const array2 = Array.from(config, init, two);
const array3 = Array.from(config, init, three);

const checkArray = (expected, actual) => {
  const actualMatches = (value, index) => value === actual[index];
  console.assert(
    expected.length === actual.length && expected.every(actualMatches),
    'array mismatch - expected: %o actual: %o',
    expected,
    actual
  );
};
const TWOS = [2, 4, 6, 8];
const THREES = [3, 6, 9, 12];
checkArray(TWOS, array2);
checkArray(THREES, array3);
Enter fullscreen mode Exit fullscreen mode

... but that's just me.

Collapse
 
lmorchard profile image
Les Orchard • Edited

I'd say that Array.from() isn't the most handy as a substitute for Array.map(). Rather, it's handy for transforming iterables that aren't already arrays.

Like, to get the names of commenters on this page, try this in the dev tools console:

Array.from(
  document.querySelectorAll('.js-comment-username'),
  el => el.textContent
)
Enter fullscreen mode Exit fullscreen mode

The NodeList returned from document.querySelectorAll isn't an array, but this lets you convert it to an array while performing a transformation at the same time.

Collapse
 
yobretyo profile image
Bret

The problem with JavaScript is that.... it’s not taught β€œin context”, it’s mainly always a β€œconsole.log” that is used for the answer, instead of truly implementing it into real examples.... it’s been tough for me to learn it

Collapse
 
killshot13 profile image
Michael R.

Liquid syntax error: Tag '{%' was not properly terminated with regexp: /\%\}/

Collapse
 
vicropht profile image
Vicropht

Make projects to learn it! Helps a lot!!!

Collapse
 
garvitmotwani profile image
Garvit Motwani

Ya

Collapse
 
strativd profile image
Strat Barrett

I'm a big fan of !! which gets the boolean value of (pretty much) anything:

let truthiness = !!12       //=> true
let truthiness = !!0        //=> false
let truthiness = !!'string' //=> true
let truthiness = !!''       //=> false
// BUT LOOK OUT FOR OBJECTS... πŸ‘€
let truthiness = !![]       //=> true
let truthiness = !!{}       //=> true
Enter fullscreen mode Exit fullscreen mode

! is the opposite so !! becomes the boolean value !! πŸ˜„

Collapse
 
parkio profile image
Chris

The Boolean() constructor is another great way to interpret falsey values.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Thanks for sharing! πŸ™πŸ™

Collapse
 
ychanov profile image
Yavor Chanov

Hi, thanks for the article.
I think there is a small mistake in the "Number to string/string to number" part...
The example for converting string to number is:
let num = "4"
let stringNumber = Number(s); //doesn't that have to be Number(num);?

Collapse
 
garvitmotwani profile image
Garvit Motwani

Welcome and Noted!!

Collapse
 
dannyengelman profile image
Info Comment hidden by post author - thread only accessible via permalink
Danny Engelman

Interesting to learn that:

let dogsNames = Array.from(dogs, ({name}) => name);

is not as complicated as:

let dogsNames = dogs.map( ({name}) => name );

BUT..
the documentation says the y parameter in Array.from(x,y,z) IS a mapFn
So yes, you do not type those 3 letters... but you still have to understand you are mapping an Array.

Since you mention the Performance API; this gives a very interesting result:

let dogs = [
    { name: "Rio" , age: 2 },
    { name: "Mac", age: 3 },
    { name: "Bruno", age: 5 },
    { name: "Jucas", age: 10 },
    { name: "Furr", age: 8 },
    { name: "Blu", age: 7 },
];

function performance(method) {
  const firstTime = performance.now();
  let dogsNames;
  for (let i = 0; i < 10000; i++) {
    if (method == 1) {
      dogsNames = Array.from(dogs, ({name}) => name);
    } else {
      dogsNames = dogs.map(({name}) => name);
    }
  }
  const secondTime = performance.now();
  console.log(`The something function took ${secondTime - firstTime} milliseconds.`);
}
performance(1);
performance(2);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
crimsonmed profile image
MΓ©dΓ©ric Burlet

for performance you use dates but since you are using console.log you could use console.time()

console.time("track");
// do stuff
console.timeEnd("track")
Enter fullscreen mode Exit fullscreen mode
Collapse
 
afif profile image
Info Comment hidden by post author - thread only accessible via permalink
Temani Afif

can you please remove the CSS tag since this post is not about CSS? thanks

Collapse
 
garvitmotwani profile image
Garvit Motwani

Ya sorry actually I wrote it before because I wanted to create a CSS post πŸ˜… thanks for the reminder

Collapse
 
g0d profile image
George Delaportas (ViR4X)

G R E A T work...

There are also many other great tricks you can do to optimize code, add quality and also provide C#-like or JAVA-like paradigms to JavaScript.

Check my web framework and especially the JS extensions for more cool ideas.

github.com/g0d/micro-MVC
github.com/g0d/micro-MVC/tree/mast...

Collapse
 
ignaciojvig profile image
Info Comment hidden by post author - thread only accessible via permalink
JoΓ£o Victor Ignacio

Thanks for sharing Garvit! About your first topic, Functional Inheritance, I don't actually agree with what you've said. Since the idea is to hide the object within a function, it kinda works, BUT, that's totally different from the concept of 'private' as data encapsulation. You can still get the object and do whatever you want. All that you doing there is hiding an object inside another, and then retrieving it. Also, be careful when using 'var', especially when talking about concepts like hoisting and closures. Your variables were actually globally scoped and their memory will not be immediatly freed after using that function.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Thanks For Sharing The Tip! Noted!

Collapse
 
macnick profile image
Nick Haralampopoulos

Nice article Garvit! I usually use the .map() substitute when creating arrays with pre-filled values. One little mistake though. array.length is a property in JavaScript not a method. It is a method in Java, C++ and others but not in JavaScript.
developer.mozilla.org/en-US/docs/W...
Thank you again for the nice article.

Collapse
 
mliakos profile image
Emmanouil Liakos

Another nice tip is that arrays passed to template literals get coerced to comma-separated strings like this:

const fruits = ['apples', 'oranges'];
console.log(${fruits}); // 'apples,oranges'

Collapse
 
cubiclesocial profile image
cubiclesocial

We can also use that to swap values fast

Swapping variables with an array isn't going to be faster (performance-wise) than just swapping the variables with the traditional method of using a temporary variable.

stackoverflow.com/questions/162016...

One of the first comments on using a temporary array is that it is roughly two times slower than a variable swap.

Javascript processes most accesses by reference. So assigning to a temporary variable doesn't copy anything but a memory address. Creating an array, on the other hand, is almost certainly going to: Hit the memory allocation pool, add two variables to the array, update the length of the array (for no good reason), then immediately extract them back out of the array, and release the array back into the memory pool. Without even having to test that, the former is obviously faster than the latter. Swapping vars happens often in software, and usually in a loop, so writing performant code vs. one-liners is more important here.

Collapse
 
rohitw3code profile image
RohitW3code

Very nice , I have a request for you can you publish you articles on our Codeddit Programmer Community it would be a great help to everyone on Codeddit app platform.
play.google.com/store/apps/details...

Collapse
 
lavigi profile image
Info Comment hidden by post author - thread only accessible via permalink
eva

Some awesome tips, thank you!

Not sure if I like overriding length with a constant value of 0 with the intention of emptying an array.

Maybe the garbage collection in JavaScript is awesome and we shouldn't worry about abandoned bits of memory, but to me this really feels like being a spoiled brat that keeps their room like a dumpster just because the family employs a maid who can clean up after them.

Collapse
 
geminii profile image
Jimmy

Really nice tips.
Question : what is the best option between using performance.now() and console.time() πŸ€”

Collapse
 
sebring profile image
J. G. Sebring

console.time will be limited to output in console, hence it is more suitable for temporary debugging/test situations.

Any other cases I'd use performance.now, like displaying time in html, sending to backend etc.

Collapse
 
geminii profile image
Jimmy

Good to know thanks for this tip πŸ˜€πŸ‘

Collapse
 
garvitmotwani profile image
Garvit Motwani

I usually use performance.now() so I would recommend that but console.time() is also good!!

Collapse
 
kasia99472765 profile image
Kasia

it`s ok

Collapse
 
buriti97 profile image
buridev

awesome bro, thanks for sharing

Collapse
 
garvitmotwani profile image
Garvit Motwani

Welcome Bro!! πŸ™

Collapse
 
bendavies99 profile image
Ben Davies

Hey quick question when changing the length of the array to remove items from the array does this not cause a memory leak because of how arrays are stored, or does the garbage collector understand this change and then clean up the memory as necessary

Collapse
 
filatovv profile image
Yuri Filatov

This is an amazing job!

Collapse
 
iqseviyesi profile image
IQ Seviyesi

Perfect tricks :)

Collapse
 
thangdangblog profile image
thangdangblog

Thank you for sharing! Your post helps me improve my skills in Javascript!

Collapse
 
as profile image
Amir Salehi

Nice πŸ‘

Collapse
 
heatxel profile image
Danz

Love it thanks great tricks

Collapse
 
abohalema98 profile image
Mohamed Ahmed

thanks for this nots

Collapse
 
garvitmotwani profile image
Garvit Motwani

Welcome bro!

Collapse
 
nol166 profile image
John McCambridge

This is awesome

Collapse
 
bacchusplateau profile image
Bret Williams

Removing duplicates is a good trick. I'll put that one in my back pocket for later.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Yep! Thanks For Reading the articleπŸ™

Collapse
 
jpotts7 profile image
jpotts7

Great tips - thanks for sharing!

Collapse
 
garvitmotwani profile image
Garvit Motwani

Welcome bro!!

Collapse
 
jobez profile image
Giovanni Bezicheri

Thanks for the article! Anyway some of those are just tricks that could sacrifice code readibility :)

Collapse
 
garvitmotwani profile image
Garvit Motwani

Ya some of them! Thanks for reading tho!

Collapse
 
tryhendri profile image
tryhendri

Thanks for sharing Garvit
It seems a typo on Map an array without .map(), it should return dogsNames rather than friendsNames.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Noted! Thanks!

Collapse
 
vikirobles profile image
Vicky Vasilopoulou

thanks for sharing Garvit!

Collapse
 
garvitmotwani profile image
Garvit Motwani

welcome bro!

Collapse
 
juniordevforlife profile image
Jason F

Great article. I'm particularly fond of the map without map.

Collapse
 
garvitmotwani profile image
Garvit Motwani

Ya I use that at often nowadays

Collapse
 
garvitmotwani profile image
Garvit Motwani

It varies from person to person like you like it but I personally find it sometimes complicated so I listed it in but thanks for the suggestion!!

Collapse
 
coderdaiyan profile image
Abdallah Daiyan

For me remove duplicates in an array was interesting.....past I removed in another way. It seems like this is so easy....Thank you so much man...It was awesome πŸš€πŸ”₯

Collapse
 
garvitmotwani profile image
Garvit Motwani

Welcome Bro!!

Collapse
 
bmehder profile image
Brad Mehder

I found this article super useful!

Collapse
 
garvitmotwani profile image
Garvit Motwani

Thanks For Reading!!

Collapse
 
sinvalfelisberto profile image
Sinval Felisberto

Thank you Kindly, Garvit!
Greetings from Brazil!

Collapse
 
ecemac profile image
Ece

Daaamn, this is very useful.

Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy

Array.from({length: 10}, (a,b)=> console.log(b)) instant of for loop, Thanks

Collapse
 
damiannelus profile image
Info Comment hidden by post author - thread only accessible via permalink
damiannelus

Hey Garvit, how long it took to copy the content of the first paragraph from here: jstips.co/en/javascript/what-is-a-... ?

Some comments have been hidden by the post's author - find out more