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.
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
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.
You can also use the let keyword multiple times in the chrome dev tools.
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
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.
Free money-back guarantee
Unlimited access to all platform courses
100's of practice projects included
ChatGPT Based Instant AI Help (Jarvis)
Structured Full-Stack Web Developer Roadmap To Get A Job
Exclusive community for events, workshops
Sharing is caring
Did you like what Mehul Mohan wrote? Thank them for their work by sharing it on social media.