JS interview in 2 minutes / Memoization 💭
Tags: javascript, typescript, beginners, career
Published: 2021-05-26 11:55:48

---
title: JS interview in 2 minutes / Memoization 💭
published: true
description: Let's try to figure out how to answer common JS questions in an interview.
tags: javascript, typescript, beginners, career
cover_image: https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1920px-Unofficial_JavaScript_logo_2.svg.png
---


**Question:**
What is memoization?

**Quick answer:**
It is a way to optimize application performance by caching results of time-consuming pure functions calculations.

**Longer answer:**
As we know from the [previous post](https://dev.to/kozlovzxc/js-interview-in-2-minutes-pure-vs-impure-functions-22om), there are pure and impure functions. 

Pure functions are basically functions that return the same result if you pass the same data and they don't change anything outside of its scope.

```javascript
let pureAdd = (a, b) => a + b
```

This `pureAdd` function doesn't change anything outside it just returns the answer and it always returns the same answer for the same arguments.

With these restrictions come the benefits. If the result is the same every time we run the functions, then why don't we just calculate it once and save the result? 

```javascript
// Don't reuse it, it is just an example
let memo = (func) => {
  let cache = {}
  return (...args) => {
    if (cache[args]) {
      console.log('Cache hit :)')
      return cache[args]
    }
    console.log('Cache miss :(')
    let result = func(...args)
    cache[args] = result
    return result
  }
}

function sleep(ms) {
  var start = new Date().getTime(), expire = start + ms;
  while (new Date().getTime() < expire) { }
  return;
}

let slowAdd = (a, b) => {
  sleep(1000)
  return a + b
}

let memoAdd = memo(slowAdd)
console.log(memoAdd(1, 2))
// * waiting for 1 sec *
// Cache miss :(
// 3
console.log(memoAdd(1, 2))
// No waiting
// Cache hit :)
// 3
```

**Real-life applications:**
It's not only a theoretical benefit but actually a practical one.

For example, there is `React.memo` which does memoization.

If your component renders the same result given the same props ... React will skip rendering the component, and reuse the last rendered result.

Also, there is a `useMemo` hook, which also does memoization.

`useMemo` will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

**Resources:**
[wiki/memoization](https://en.wikipedia.org/wiki/Memoization#:~:text=In%20computing%2C%20memoization%20or%20memoisation,the%20same%20inputs%20occur%20again.)
[react-docs](https://reactjs.org/docs/react-api.html#reactmemo)

**Other posts:**
* [JS interview in 2 minutes / pure vs impure functions](https://dev.to/kozlovzxc/js-interview-in-2-minutes-pure-vs-impure-functions-22om)
* [JS interview in 2 minutes / Closure](https://dev.to/kozlovzxc/js-interview-in-2-minutes-closure-3hi6)
* [JS interview in 2 minutes / Currying 🥘](https://dev.to/kozlovzxc/js-interview-in-2-minutes-currying-2hko)

---

Btw, I will post more fun stuff here and on [Twitter](https://twitter.com/kozlovzxc). Let's be friends 👋