Introduction to Memoization in JavaScript

Boost the speed of your JavaScript codebases

Memoization example function in JavaScript
Image by author

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.

  1. Lodash.memoize
  2. 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

More articles from Zafar

  1. AWS DynamoDB & Nextjs Building Real World App
  2. How To Hack Algolia Search To Enhance React
  3. Go Serverless for GraphQL Backend With Grafbase
  4. Event Based Architecture Using React

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Zafar Saleem | Freelance Frontend Engineer
Zafar Saleem | Freelance Frontend Engineer

Written by Zafar Saleem | Freelance Frontend Engineer

I Transform Ideas to Stunning, User-Friendly Websites That Drive Results As Freelancer Website: https://zafar-saleem.github.io Contact: zafarsaleem3@gmail.com

Responses (2)

Write a response