DEV Community

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...

Read full post

Muhammad Talha Akbar • Apr 6 '21 • 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.

Strat Barrett • Apr 8 '21

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 :)

An actual, Real Samurai • Apr 12 '21 • 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

Michael R. • Apr 13 '21

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)

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

🤔🤔🤔

An actual, Real Samurai • Apr 14 '21

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.

Garvit Motwani • Apr 7 '21

Noted! and thanks for reading the article!

Comment hidden by post author - thread only accessible via permalink

David Sanwald • Apr 6 '21

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?

Garvit Motwani • Apr 7 '21

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

Nick Morton • Apr 7 '21

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().

Comment hidden by post author - thread only accessible via permalink

shadowtime2000 • Apr 7 '21

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.

johannchopin • Apr 7 '21

You're right and I like your avatar👍

Garvit Motwani • Apr 7 '21

Thanks! I don’t remember how I created that

Garvit Motwani • Apr 7 '21

Noted

Nick • Apr 7 '21 • Edited

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

const num = 32
const str = `${32}`

Garvit Motwani • Apr 7 '21

That is interesting and thanks for sharing!!

Alexandre Alencar • Apr 8 '21

or

num + ''

Nick • Apr 8 '21

This method described in the article :/

Vladimir C • May 28 '21

I believe you meant

const str = `${num}`

peerreynders • Apr 8 '21

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);

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.

lkarabeg • Apr 9 '21

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

peerreynders • Apr 9 '21

With

const array = (new Array(length)).fill().map(init);

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;
});

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);

... but that's just me.

Les Orchard • Apr 8 '21 • 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
)

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.

Bret • Apr 6 '21

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

Michael R. • Apr 13 '21

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

Vicropht • Apr 12 '21

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

Garvit Motwani • Apr 7 '21

Strat Barrett • Apr 8 '21

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

! is the opposite so !! becomes the boolean value !! 😄

Chris • Apr 10 '21

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

Garvit Motwani • Apr 8 '21

Thanks for sharing! 🙏🙏

Yavor Chanov • Apr 7 '21

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);?

Garvit Motwani • Apr 7 '21

Welcome and Noted!!

Comment hidden by post author - thread only accessible via permalink

Danny Engelman • Apr 7 '21

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);

Médéric Burlet • Apr 8 '21

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")

Comment hidden by post author - thread only accessible via permalink

Temani Afif • Apr 6 '21

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

Garvit Motwani • Apr 6 '21

Ya sorry actually I wrote it before because I wanted to create a CSS post 😅 thanks for the reminder

George Delaportas (ViR4X) • Apr 10 '21

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...

Comment hidden by post author - thread only accessible via permalink

João Victor Ignacio • Apr 6 '21

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.

Garvit Motwani • Apr 7 '21

Thanks For Sharing The Tip! Noted!

Nick Haralampopoulos • Apr 12 '21

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.

Emmanouil Liakos • Apr 12 '21

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'

cubiclesocial • Apr 11 '21

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.

RohitW3code • Apr 8 '21

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...

Comment hidden by post author - thread only accessible via permalink

eva • Apr 10 '21

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.

Jimmy • Apr 6 '21

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

J. G. Sebring • Apr 8 '21

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.

Jimmy • Apr 8 '21

Good to know thanks for this tip 😀👍

Garvit Motwani • Apr 7 '21

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

Kasia • Apr 13 '21

it`s ok

buridev • Apr 6 '21

awesome bro, thanks for sharing

Garvit Motwani • Apr 6 '21

Welcome Bro!! 🙏

Ben Davies • Apr 19 '21

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

Yuri Filatov • Apr 13 '21

This is an amazing job!

IQ Seviyesi • Apr 13 '21

Perfect tricks :)

thangdangblog • Apr 11 '21

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

Amir Salehi • Apr 10 '21

Nice 👍

Danz • Apr 10 '21

Love it thanks great tricks

Mohamed Ahmed • Apr 10 '21

thanks for this nots

Garvit Motwani • Apr 10 '21

Welcome bro!

John McCambridge • Apr 9 '21

This is awesome

Bret Williams • Apr 8 '21

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

Garvit Motwani • Apr 8 '21

Yep! Thanks For Reading the article🙏

jpotts7 • Apr 8 '21

Great tips - thanks for sharing!

Garvit Motwani • Apr 8 '21

Welcome bro!!

Giovanni Bezicheri • Apr 8 '21

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

Garvit Motwani • Apr 8 '21

Ya some of them! Thanks for reading tho!

tryhendri • Apr 7 '21

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

Garvit Motwani • Apr 7 '21

Noted! Thanks!

Vicky Vasilopoulou • Apr 6 '21

thanks for sharing Garvit!

Garvit Motwani • Apr 7 '21

welcome bro!

Jason F • Apr 7 '21

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

Garvit Motwani • Apr 7 '21

Ya I use that at often nowadays

Garvit Motwani • Apr 7 '21

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!!

Abdallah Daiyan • Apr 7 '21

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 🚀🔥