Bench-marking your JavaScript Code

There is always a better way to implement that function

Getting a problem and straightaway writing a function for it is something we all tend to do unless we are industry veterans, because the industry veterans take a lot of factors into account while composing a function. I write “composing” because if you come across code written by people like Kyle Simpson, you’ll be mesmerized by the sheer elegance of their code, and it is nothing short of a well composed song!

Clean Code and the importance of bench-marking

Currently I am reading Clean Code by Robert Cecil Martin and to be honest I am discovering a whole new set of paradigms I wasn’t aware of and thus inculcating clean code habits. One of the habit is bench-marking your piece of code. As a developer, you should always consider that there are multiple ways to achieve the desired results and hence try to figure out the best one.

And if you are developing products which will be/are traffic intensive (say more than 1 Million unique users), then the speed of every little function will play a crucial role in making or breaking the product.

Okay, show me how?

Recently I had to write code for a function to return a string between two curly braces.

For example, if the string is — “{adityatyagi}”, I had to extract the string between “{“ and “}”. Thus, the function should return “adityatyagi”.

I did come up with an elementary function but then I decided to benchmark the function with various counter-parts and see which one is the fastest.

Console.time() and Console.timeEnd()

If you wrap your function between console.time() and console.timeEnd(), you can get the time it took the function to execute.

On running this function (say in codepen.io), you’ll get the time it took to execute this function in your developer tools.

For me the result came out to be something like:

default: 0.246826171875ms

The console will print “default” if you don’t give a label to console.time() and console.timeEnd(). If you do want to give a label, then make sure you give the same label to both. For example:

JsPerf — JavaScript performance playground

JsPerf is another way you can compare your functions and benchmark them. It is pretty easy once you get the hold of it. All you have to do is add your different blocks of code and run tests. That’s it.

I compared 4 functions to extract a string between curly-braces using JsPerf. You can see it here.

The results came out to be pretty astonishing, but yes, it did helped to identify the best one of the lot.

Comparing functions

As you can see, I went with a function which is nearly 5% faster than the others and the slowest of the lot is 26% slower than the fastest function. Now this 5% may look like a small difference but when your function is being called a million times within 30 seconds by a million unique visitors, just imagine the difference this 5% will bring or the adversity that 26% slower code will have on your product.

So do benchmark your functions before you raise that next PR or commit code to production!

If you liked it, do share it with your dev-friends, colleagues and if you have any suggestions for me, let me know in the comments section below!

Originally published at adityatyagi.com

--

--

--

Programmer and a voracious reader who writes about web development | adityatyagi.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Next.js for React: Why You Should Give It a Try Right Now

How to Set Up Environment for MERN stacks (quickly)

Delete A Node

TIL Bulma JWT

Callbacks, Promises and Async/Await

Getting Started With Firebase Authentication in React

Async/Await & Promises in Javascript ES6

User-Tracking With CSS Only

CSS User Tracking

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aditya Tyagi

Aditya Tyagi

Programmer and a voracious reader who writes about web development | adityatyagi.com

More from Medium

Add Icons to React, Angular, or Vue Apps in 3 Steps

Add Icons to React, Angular or Vue Apps in 3 Steps

Angular Directive alternative in React

Minimal Setup for Typescript + HTML5 Development

Chaining Patterns in JavaScript