Logo

dev-resources.site

for different kinds of informations.

JavaScript Memoization

Published at
11/23/2023
Categories
javascript
programming
webdev
memoization
Author
sundarbadagala081
Author
17 person written this
sundarbadagala081
open
JavaScript Memoization

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 🔕

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()
Enter fullscreen mode Exit fullscreen mode

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 🔔

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()
Enter fullscreen mode Exit fullscreen mode

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 😊

memoization Article's
30 articles in total
Favicon
The intricacies of implementing memoization in Ruby
Favicon
Memorização em JavaScript
Favicon
When do (and don’t) children re-render in React?
Favicon
Memoization in React: When It Helps and When It Hurts
Favicon
Never call the same function twice (with memoization)
Favicon
Optimizing React Performance with Memoization and React.memo
Favicon
Optimizing React Component Performance with Memoization and React.memo
Favicon
Optimizing React Performance with memoization and React.memo
Favicon
Optimizing React Performance with Memoization and React.memo
Favicon
Optimizing React Component Performance with Memoization
Favicon
Кеширования в React - все ли так однозначно?
Favicon
Understanding and Implementing Memoization in React
Favicon
Caching & Memoization with state variables
Favicon
How to implement Memoization in your React projects
Favicon
Memoization in JavaScript
Favicon
Mastering React: A Deep Dive into Memoization and Component Optimization
Favicon
How to Use Memoization in React for Better Performance
Favicon
Deep Dive into Functional Programming in Javascript
Favicon
Demystifying React Memoization: Understanding React.memo() and the useMemo hook
Favicon
JavaScript Memoization
Favicon
Maximizing Performance: How to Memoize Async Functions in JavaScript
Favicon
Retos JS. Calculando factoriales muy grandes con JS.
Favicon
Memoizing DataFrame Functions: Using Hashable DataFrames and Message Digests to Optimize Repeated Calculations
Favicon
Memoize a React component
Favicon
Memoization in JavaScript and React
Favicon
Memoization in Ruby
Favicon
Advent of code Day 21
Favicon
Understanding Memoization in Javascript
Favicon
Reselect, but in OCaml
Favicon
Memoization in Javascript

Featured ones: