Introduction to Memoization in JavaScript
Boost the speed of your JavaScript codebases
The days of making fun of JavaScript are long gone. JavaScript, now, is the most widely scripting language used on the web. In fact, if you would like to be a web engineer, then you have no option but to use JavaScript as long as the user interface implementation is concerned.
With the invention of SPAs, the usage of JavaScript and handling heavy computations on the JavaScript side becomes normal. For small computations, we perhaps avoid considering performance-related concepts however, for heavy computations and expensive operations we will need to consider optimization techniques.
Memoization
In this blog post, we will talk about one of such techniques which is memoization. Memoization is an optimization technique in which we cache results of the same given input value.
After caching them, when that same logic is rerun, we check if the input value is the same as previously given then avoid heavy computation and simply return the cached result which makes the performance of the program better and faster.
Memoization using JavaScript
Now let’s get back to JavaScript, in JavaScript to implement the memoization technique we will get help from the concepts of closures and higher order functions.
Since this blog post is more about performance and optimization therefore, I would suggest you please go ahead and read about closures and higher-order functions if you are unaware of these concepts.
Let’s take a simple coding example below.
Here we are passing two values to addition function and return the sum of these values.
When we call that function twice or more for same input(arguments) values, it will execute the logic of adding them every time. We can simply improve its performance by using memoization like below.
In the above piece of code, the internal function first checks if we already have the result from previous inputs cached if it simply returns that result. If it is not cached then go ahead and calculate the sum and cache that and return the final result.
Below is a bit more of a functional approach to implementing optimisation technique:
Here you can also find a couple of utility functions from different libraries to implement memoization.
Utility Libraries
Below are a couple of utility libraries I would like to mention in order to implement memoization.
- Lodash.memoize
- Moize
1. Lodash.memoize
Lodash is a famous utility library which offers several utility functions with optimised solutions. It is a fork of underscore library but does a great job as far as performance is concern. Lodash offers a memoize function which helps us memoize our function which caches its result before it calculates the heavy computation. It is easily available as an npm package which you can install with following command:
Below is how to use it:
2. Moize
Moize is another utility library that entirely offers memoization techniques. It is also available as an npm package and can be installed with the following command:
Below is how we can use it:
That’s it for this blog post. I hope now you have got a good understanding of memoization technique and you will use it in your code.
Contact Me For Hiring Me
https://zafar-saleem.github.io
