JavaScript Design Patterns

Memoization

Cache function results for performance optimization

Find videos you like?

Save to resource drawer for future reference!

Memoization: Remember the Past

Memoization is a technique where you cache the results of expensive function calls and return the cached result when the same inputs occur again. Perfect for optimization!

Key Concept

Same input → Same output? Store it! Don't recalculate expensive operations.

Cache Visualization

Watch how memoization caches fibonacci(5) results

Click Start to see how memoization caches function results

Cache Storage:

Cache is empty

Function Calls

Cache Hits

Cache Size

Notice the Pattern?

Each unique input is computed once and cached. Subsequent calls with the same input are instant cache hits! This is the power of memoization.

Performance Demo: Fibonacci(10)

Compare function calls with and without memoization

🐢Without Memoization

Function Calls:0

🚀With Memoization

Function Calls:0

Notice the Difference?

Regular Fibonacci: 177 calls 😱
Memoized Fibonacci: 19 calls 🎉
That's a 90%+ reduction in function calls!

Basic Memoization

Simple caching pattern

❌ Without Memoization

// Slow - recalculates every time
function expensiveOperation(n) {
  console.log('Computing for', n);
  let result = 0;
  for (let i = 0; i < n * 1000000; i++) {
    result += i;
  }
  return result;
}

expensiveOperation(5); // Computes
expensiveOperation(5); // Computes AGAIN!
expensiveOperation(5); // Still computing!

✅ With Memoization

// Fast - cache results
const cache = {};

function expensiveOperation(n) {
  if (n in cache) {
    console.log('Cache hit for', n);
    return cache[n];
  }
  
  console.log('Computing for', n);
  let result = 0;
  for (let i = 0; i < n * 1000000; i++) {
    result += i;
  }
  cache[n] = result;
  return result;
}

expensiveOperation(5); // Computes once
expensiveOperation(5); // Cache hit! ⚡
expensiveOperation(5); // Cache hit! ⚡

Generic Memoize Function

Reusable memoization wrapper

javascript

code

DarkEditable

// Generic memoize utility
function memoize(fn) {
  const cache = {};
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (key in cache) {
      console.log('Cache hit:', args);
      return cache[key];
    }
    
    console.log('Computing:', args);
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

// Use with any function
const add = (a, b) => {
  // Simulate expensive operation
  for (let i = 0; i < 1000000; i++) {}
  return a + b;
};

const memoizedAdd = memoize(add);

console.log(memoizedAdd(5, 3));  // Computing: [5, 3] → 8
console.log(memoizedAdd(5, 3));  // Cache hit: [5, 3] → 8
console.log(memoizedAdd(10, 2)); // Computing: [10, 2] → 12
console.log(memoizedAdd(5, 3));  // Cache hit: [5, 3] → 8

// Works with multiple arguments
const multiply = (a, b, c) => a * b * c;
const memoizedMultiply = memoize(multiply);

console.log(memoizedMultiply(2, 3, 4));  // 24 (computed)
console.log(memoizedMultiply(2, 3, 4));  // 24 (cached)

// Fibonacci with memoization
const fibonacci = memoize((n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(40)); // Fast! ⚡

Console Output

Click "Run Code" to see output here...

Advanced Memoization

Cache size limits and TTL

LRU Cache with Max Size

// Least Recently Used cache
function memoizeWithLimit(fn, limit = 100) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      // Move to end (mark as recently used)
      const value = cache.get(key);
      cache.delete(key);
      cache.set(key, value);
      return value;
    }
    
    const result = fn.apply(this, args);
    
    // Remove oldest if at limit
    if (cache.size >= limit) {
      const firstKey = cache.keys().next().value;
      cache.delete(firstKey);
    }
    
    cache.set(key, result);
    return result;
  };
}

// With Time-To-Live (TTL)
function memoizeWithTTL(fn, ttl = 5000) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    const cached = cache.get(key);
    
    if (cached && Date.now() - cached.timestamp < ttl) {
      console.log('Valid cache hit');
      return cached.value;
    }
    
    const result = fn.apply(this, args);
    cache.set(key, {
      value: result,
      timestamp: Date.now()
    });
    
    return result;
  };
}

// Usage
const fetchUser = memoizeWithTTL(async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}, 5000); // Cache for 5 seconds

await fetchUser(1); // API call
await fetchUser(1); // Cached (within 5s)
// After 5 seconds...
await fetchUser(1); // Fresh API call

When to Use Memoization

Best practices and gotchas

javascript

code

DarkEditable

// Memoize utility function
function memoize(fn) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (key in cache) {
      return cache[key];
    }
    const result = fn.apply(this, args);
    cache[key] = result;
    return result;
  };
}

// ✅ Good use cases:

// 1. Pure functions with expensive calculations
const factorial = memoize((n) => {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
});

// 2. API calls with same parameters
const getUser = memoize(async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
});

// 3. Complex data transformations
const processData = memoize((data) => {
  return data
    .filter(item => item.active)
    .map(item => ({
      ...item,
      processed: true,
      value: item.value * 2
    }))
    .reduce((acc, item) => {
      acc.total += item.value;
      acc.count++;
      return acc;
    }, { total: 0, count: 0 });
});

// ❌ Bad use cases:

// 1. Non-deterministic functions
const badMemo1 = memoize(() => Math.random()); // Always returns same!
const badMemo2 = memoize(() => Date.now());     // Stuck in time!

// 2. Functions with side effects
const badMemo3 = memoize((value) => {
  console.log(value);  // Won't log on cache hit
  database.save(value); // Won't save on cache hit!
  return value;
});

// 3. Large objects as arguments
const badMemo4 = memoize((obj) => {
  // JSON.stringify(obj) can be slow for large objects
  return obj.value * 2;
});

// 4. Functions called with unique arguments
const badMemo5 = memoize((timestamp) => {
  return timestamp * 2;
});
badMemo5(Date.now()); // Always different, never cached!

// Best practices:
// - Use for pure functions only
// - Consider memory vs. speed tradeoff
// - Implement cache size limits
// - Add TTL for data that changes
// - Monitor cache hit rate

Console Output

Click "Run Code" to see output here...

Real-World Example: React Component

Memoization in React with useMemo (simulated)

javascript

code

DarkEditable

// Simulating React's useMemo hook
function useMemo(factory, deps) {
  // In real React, this checks if deps changed
  return factory();
}

function useState(initial) {
  // Simplified - returns state and setter
  let state = initial;
  return [state, (newState) => { state = newState; }];
}

// Custom memoization hook
function useExpensiveCalculation(compute, deps) {
  return useMemo(() => {
    console.log('Computing expensive value...');
    return compute();
  }, deps);
}

// Usage example
function MyComponent(props) {
  const numbers = props.numbers;
  
  const sum = useExpensiveCalculation(
    () => numbers.reduce((a, b) => a + b, 0),
    [numbers]
  );
  
  console.log('Memoized sum:', sum);
  return sum;
}

// Demo
const sampleData = [
  { id: 1, name: 'Item 1', status: 'active', revenue: 100, category: 'tech' },
  { id: 2, name: 'Item 2', status: 'inactive', revenue: 200, category: 'sales' }
];

DataDashboard({ data: sampleData });
MyComponent({ numbers: [1, 2, 3, 4, 5] });

// In actual React:
// import React, { useMemo, useState } from 'react';

Console Output

Click "Run Code" to see output here...

Key Takeaways

💾

Cache Results

Store expensive computation results
Return cached value for same inputs

⚡

Performance Boost

Dramatic speedup for recursive functions
Avoid redundant calculations

🎯

Pure Functions Only

Works with deterministic functions
No side effects allowed

⚠️

Trade-offs

Uses memory for cache
Add size limits and TTL when needed

Pro Tip

Memoization trades memory for speed. Use it for expensive, pure functions called repeatedly with the same inputs. Monitor cache hit rates to ensure it's actually helping!

Previous Topic

Recursion

Self-calling functions for elegant problem solving.

Next Topic

Error Handling

try-catch-finally, custom errors, and error boundaries.

Ask a Question

Have a question about Memoization? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Design Patterns

Memoization

Cache function results for performance optimization

Find videos you like?

Save to resource drawer for future reference!

Memoization: Remember the Past

Memoization is a technique where you cache the results of expensive function calls and return the cached result when the same inputs occur again. Perfect for optimization!

Key Concept

Same input → Same output? Store it! Don't recalculate expensive operations.

Cache Visualization

Watch how memoization caches fibonacci(5) results

Click Start to see how memoization caches function results

Cache Storage:

Cache is empty

Function Calls

Cache Hits

Cache Size

Notice the Pattern?

Each unique input is computed once and cached. Subsequent calls with the same input are instant cache hits! This is the power of memoization.

Performance Demo: Fibonacci(10)

Compare function calls with and without memoization

🐢Without Memoization

Function Calls:0

🚀With Memoization

Function Calls:0

Notice the Difference?

Regular Fibonacci: 177 calls 😱
Memoized Fibonacci: 19 calls 🎉
That's a 90%+ reduction in function calls!

Basic Memoization

Simple caching pattern

❌ Without Memoization

// Slow - recalculates every time
function expensiveOperation(n) {
  console.log('Computing for', n);
  let result = 0;
  for (let i = 0; i < n * 1000000; i++) {
    result += i;
  }
  return result;
}

expensiveOperation(5); // Computes
expensiveOperation(5); // Computes AGAIN!
expensiveOperation(5); // Still computing!

✅ With Memoization

// Fast - cache results
const cache = {};

function expensiveOperation(n) {
  if (n in cache) {
    console.log('Cache hit for', n);
    return cache[n];
  }
  
  console.log('Computing for', n);
  let result = 0;
  for (let i = 0; i < n * 1000000; i++) {
    result += i;
  }
  cache[n] = result;
  return result;
}

expensiveOperation(5); // Computes once
expensiveOperation(5); // Cache hit! ⚡
expensiveOperation(5); // Cache hit! ⚡

Generic Memoize Function

Reusable memoization wrapper

javascript

code

DarkEditable

// Use with any function
const add = (a, b) => {
  // Simulate expensive operation
  for (let i = 0; i < 1000000; i++) {}
  return a + b;
};

const memoizedAdd = memoize(add);

// Works with multiple arguments
const multiply = (a, b, c) => a * b * c;
const memoizedMultiply = memoize(multiply);

console.log(memoizedMultiply(2, 3, 4));  // 24 (computed)
console.log(memoizedMultiply(2, 3, 4));  // 24 (cached)

// Fibonacci with memoization
const fibonacci = memoize((n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(40)); // Fast! ⚡

Console Output

Click "Run Code" to see output here...

Advanced Memoization

Cache size limits and TTL

LRU Cache with Max Size

// Least Recently Used cache
function memoizeWithLimit(fn, limit = 100) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      // Move to end (mark as recently used)
      const value = cache.get(key);
      cache.delete(key);
      cache.set(key, value);
      return value;
    }
    
    const result = fn.apply(this, args);
    
    // Remove oldest if at limit
    if (cache.size >= limit) {
      const firstKey = cache.keys().next().value;
      cache.delete(firstKey);
    }
    
    cache.set(key, result);
    return result;
  };
}

// With Time-To-Live (TTL)
function memoizeWithTTL(fn, ttl = 5000) {
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    const cached = cache.get(key);
    
    if (cached && Date.now() - cached.timestamp < ttl) {
      console.log('Valid cache hit');
      return cached.value;
    }
    
    const result = fn.apply(this, args);
    cache.set(key, {
      value: result,
      timestamp: Date.now()
    });
    
    return result;
  };
}

// Usage
const fetchUser = memoizeWithTTL(async (id) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}, 5000); // Cache for 5 seconds

await fetchUser(1); // API call
await fetchUser(1); // Cached (within 5s)
// After 5 seconds...
await fetchUser(1); // Fresh API call

When to Use Memoization

Best practices and gotchas

javascript

code

DarkEditable

// ✅ Good use cases:

// 1. Pure functions with expensive calculations
const factorial = memoize((n) => {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
});

// 2. API calls with same parameters
const getUser = memoize(async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
});

// ❌ Bad use cases:

// 1. Non-deterministic functions
const badMemo1 = memoize(() => Math.random()); // Always returns same!
const badMemo2 = memoize(() => Date.now());     // Stuck in time!

// 2. Functions with side effects
const badMemo3 = memoize((value) => {
  console.log(value);  // Won't log on cache hit
  database.save(value); // Won't save on cache hit!
  return value;
});

// 3. Large objects as arguments
const badMemo4 = memoize((obj) => {
  // JSON.stringify(obj) can be slow for large objects
  return obj.value * 2;
});

// 4. Functions called with unique arguments
const badMemo5 = memoize((timestamp) => {
  return timestamp * 2;
});
badMemo5(Date.now()); // Always different, never cached!

// Best practices:
// - Use for pure functions only
// - Consider memory vs. speed tradeoff
// - Implement cache size limits
// - Add TTL for data that changes
// - Monitor cache hit rate

Console Output

Click "Run Code" to see output here...

Real-World Example: React Component

Memoization in React with useMemo (simulated)

javascript

code

DarkEditable

// Simulating React's useMemo hook
function useMemo(factory, deps) {
  // In real React, this checks if deps changed
  return factory();
}

function useState(initial) {
  // Simplified - returns state and setter
  let state = initial;
  return [state, (newState) => { state = newState; }];
}

// Custom memoization hook
function useExpensiveCalculation(compute, deps) {
  return useMemo(() => {
    console.log('Computing expensive value...');
    return compute();
  }, deps);
}

// Demo
const sampleData = [
  { id: 1, name: 'Item 1', status: 'active', revenue: 100, category: 'tech' },
  { id: 2, name: 'Item 2', status: 'inactive', revenue: 200, category: 'sales' }
];

DataDashboard({ data: sampleData });
MyComponent({ numbers: [1, 2, 3, 4, 5] });

// In actual React:
// import React, { useMemo, useState } from 'react';

Console Output

Click "Run Code" to see output here...

Key Takeaways

💾

Cache Results

Store expensive computation results
Return cached value for same inputs

⚡

Performance Boost

Dramatic speedup for recursive functions
Avoid redundant calculations

🎯

Pure Functions Only

Works with deterministic functions
No side effects allowed

⚠️

Trade-offs

Uses memory for cache
Add size limits and TTL when needed

Pro Tip

Memoization trades memory for speed. Use it for expensive, pure functions called repeatedly with the same inputs. Monitor cache hit rates to ensure it's actually helping!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Recursion

Error Handling

JavaScript Code Editor

Building Your Learning Module...

Memoization

Memoization: Remember the Past

Key Concept

Cache Storage:

Notice the Pattern?

🐢Without Memoization

🚀With Memoization

Notice the Difference?

❌ Without Memoization

✅ With Memoization

Generic Memoize Function

LRU Cache with Max Size

When to Use Memoization

Real-World Example: React Component

Key Takeaways

Cache Results

Performance Boost

Pure Functions Only

Trade-offs

Pro Tip

Recursion

Error Handling

JavaScript Code Editor

Memoization

Memoization: Remember the Past

Key Concept

Cache Storage:

Notice the Pattern?

🐢Without Memoization

🚀With Memoization

Notice the Difference?

❌ Without Memoization

✅ With Memoization

Generic Memoize Function

LRU Cache with Max Size

When to Use Memoization

Real-World Example: React Component

Key Takeaways

Cache Results

Performance Boost

Pure Functions Only

Trade-offs

Pro Tip