JavaScript Memoization
Tags: javascript, programming, webdev, memoization
Published: 2023-11-23 16:56:43

## INTRO 🔊
Memoization is a technique 🏆 used in computer programming to optimize 🚀 the performance of applications. It involves storing 💿 the results of expensive function calls and returning the cached result when the same inputs occur again. This can reduce 📉 the number of function calls and improve the overall efficiency of the program. 🎉

Sometimes we need to call the same logic again and again with different parameters. What if that logic is very expensive? To avoid it `javascript` has one beautiful concept which is known as `Memoization` 🔥. `Memoization` is the concept which `memorises` the previous result and it will return whenever we call it with the same parameters without having any operation 😎.

## DEFINITION 🔊
Memoization is a technique for speeding up applications by `caching` the results of expensive function calls and returning them when the same inputs are used again. 🚀

## USE CASE 🔊
As earlier said, Sometimes we need to do the same operation with the same inputs again and again. If that operation is expensive, every time it will take more time to run that operation. Memoization will help us overcome this problem

## EXAMPLE 🔊

**WITHOUT MEMOIZATION 🔕**

```javascript
const squareFn = (n)=>{
    let count =0
    for(let i=1; i<=n; i++){
        for(let j=1; j<=n; j++){
            count++
        }
    }
    return count
}

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()
```
By observing the above code we can understand that initially, we called `squareFn` function with parameter `30000`. It is a very expensive operation so it will take more time to return the value. If you call the same `squareFn` function with the same parameter `30000`, then also it will take same time (The time it will take to return the value previously) to return the value 😞. So here `memoization` helps us to remember that value and returns without any operation whenever we call that function with the same parameter 😉.

**WITH MEMOIZATION** 🔔
```javascript
const squareFn=(n)=>{
    let count=0
    for(let i=1; i<=n; i++){
        for(let j=1; j<=n; j++){
            count++
        }
    }
    return count
}

const memoizationFn=(callback)=>{
    const memoizedObj={}
    return (n)=>{
        if(!memoizedObj[n]){
            memoizedObj[n] = callback(n)
        }
        return memoizedObj[n]
    }
}

const square = memoizationFn(squareFn)


console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()
```
If you call the `square` function the first time with parameter `30000` it will take more time to return the value. But when it's second calling with the same parameter `30000` it will return the memoized from object memoizedObj without doing any operation. 

## CONCLUSION 🔊
Memoization is a beautiful concept which helps increase the performance of applications. If your application has these types of properties (i.e. need to call a function with the same parameters multiple times) memoization helps you very much.

Peace 😊