10 Awesome JavaScript Pro Tips – Know’em all

JavaScript is an amazing language and in 2021 if you’re doing any sort of development that involves browsers or using browsers at any point then chances are you have encountered JavaScript in the form of web or server (Node JS) or even mobile application.

In this article let’s discuss my top 10 JavaScript pro tips which will help you become a better developer.

1. Finding your code execution time

Instead of using old and hacky ways of finding how much time a particular algorithm or a code snippet is utilizing, you can use console.time() and console.timeEnd() to determine how fast your code is. This has the added benefit that it will automatically display it in the console and will help you manage your timers in your application.

Here’s a quick example of how you can achieve this in JavaScript. You have to start the timer by calling console.time() with the label and once you are done with the execution part of the code, you can always call console.timeEnd() and in the console, you are going to see the execution time.

2. Using ES6 array methods

A lot of people do not use some of the awesome array methods which were available since ES6 like array.find(), array.map(), array.reduce(), array.sum(), array.filter(),  array.forEach(), etc. You can do all the things which these methods do with a simple for loop as well but whenever you can use these helper methods, you should use them because they keep your code clean, concise, and declarative instead of being imperative.

3. Using async/await instead of promises

Use async/await instead of promises because that is syntactically much easier on the eyes.

Consider the above example of a simple fetch request where you need the headers as well as the body of the request. Without async/await it might become a mess to manage all of this stuff in promises but with async/await you will not only have a much cleaner syntax but it’s much easier to read. Try using async/await wherever you can instead of just regular promises.then() because they are usually a drop-in replacement for promises.

4. Convert callback based APIs into promises

If you have a function that requires a callback instead of a promise being function you can easily convert it into a promise being function by creating a new function that returns a promise and resolves in the callback (callback function is the resolver function). You can use that same functionality with async/await later once you have created a promisified version out of it.

5. Use Destructuring

Destructure code a lot. Destructuring can help you make your syntax look much more concise and clean.

Take a quick look at this example. You can either do props.a, props.b, props.c all the way down or you can extract and destruct them in a single line. Similarly, with arrays, you can use a similar methodology to get the individual elements out of a particular array, like an example you can see below.

6. Using Dynamic key names

Did you know that you can use dynamic key names that is, the key name is actually in the variable and then you use it as the name of the key in the object? This is perfectly possible in JavaScript if you use a square bracket notation and put the variable name. Once you do that, instead of treating that as a regular key of the object, JavaScript will try to evaluate the value of that variable and extract the key out of it. Now do remember that the regular rules for key still apply that it has to be a string. It cannot be an object or anything otherwise you’ll get those weird key names which are [object object].

7. Using Top level await

Top level await is already available in NodeJS and Dino but you can use top level await in Chrome dev tools as well. It is especially helpful when you just want a quick fetch request and want the results right there instead of just adding .then() methods and figuring out what the response is.

8. Using let keyword in JavaScript

You can also use the let keyword multiple times in the chrome dev tools.

9. Use sets in JavaScript

You can use set as a data structure to improve the performance and functionality of your application. You can use a set to eliminate duplicate elements. You can destructure set back into an array or you can convert an array into a set and do all sorts of fun operations.

This is a quick example of how you can convert an array with multiple values into a set that will have unique values and back into an array that will have unique values.

10. Using window.matchMedia

It’s a very handy method to use css media queries inside of JavaScript. Here’s an interesting use case of css media query which you can use in JavaScript to listen for a breakpoint on 768 pixels.

For example, this breakpoint media query when attached to a listener will fire that JavaScript function every single time the media query should run. This has the advantage that you can compose much more complicated queries and complex queries like mixing and matching widths and orientations which cannot be done purely with just JavaScript.
You should realize that media queries are about 3-5 times as slow in Chrome as (compared to, say innerWidth). If your code is using media queries in a better way or in a justified way it’s still super fast and super convenient to use.