Immutable Memoization是否可行？JavaScript中如何实现？

Great question! Keeping your JavaScript codebase focused on immutability and pure functions is such a solid approach—so let's tackle how to implement immutable memoization without breaking those principles.

The core problem with traditional memoization is that it relies on mutating a cache (usually a closure-scoped object) to store new results. That's a no-go for pure, immutable code. Instead, we need a way to create memoized functions that never modify existing state—every time we add a new entry to the cache, we return a brand-new memoized function with an updated cache (leaving the original one untouched).

Core Idea: Immutable Memoization 101 #

For immutable memoization:

1. We start with a pure function and an initial empty cache.
2. When we call the memoized function:
   • If the result is already in the cache, we return the result plus the same memoized function (no state change needed).
   • If not, we compute the result, create a new cache (combining the old cache with the new entry), and return the result plus a new memoized function tied to this fresh cache.
3. All operations are stateless—no existing objects or functions are modified.

Basic Implementation with Plain JavaScript #

Here's a working example using plain JS, with a helper to serialize arguments into cache keys:

// Helper to serialize arguments into a consistent cache key
const serializeArgs = (args) => JSON.stringify(args);

// Immutable memoization factory function
const immutableMemoize = (fn, cache = {}) => {
  return (...args) => {
    const key = serializeArgs(args);
    
    // Return existing result + same memoized function if cache hit
    if (cache.hasOwnProperty(key)) {
      return {
        result: cache[key],
        memoizedFn: immutableMemoize(fn, cache)
      };
    }
    
    // Compute result, create NEW cache (no mutation!)
    const result = fn(...args);
    const newCache = {...cache, [key]: result};
    
    // Return result + new memoized function with updated cache
    return {
      result,
      memoizedFn: immutableMemoize(fn, newCache)
    };
  };
};

How to Use It #

// Example pure function: calculate the square of a number
const square = (x) => x * x;

// Initialize the memoized function
let memoizedSquare = immutableMemoize(square);

// First call: cache is empty, compute result and get updated function
const firstCall = memoizedSquare(5);
console.log(firstCall.result); // 25
memoizedSquare = firstCall.memoizedFn; // Update to use the cached version

// Second call: cache hit, result is returned instantly
const secondCall = memoizedSquare(5);
console.log(secondCall.result); // 25
// The original memoized function (before first call) still exists unchanged!

Handling Complex Parameters #

The basic JSON.stringify works for primitive values, but fails for objects with unordered keys (e.g., {a:1, b:2} and {b:2, a:1} would generate different keys, even though they're equivalent inputs). Let's fix the serialization helper to handle this:

const serializeArgs = (args) => {
  const stringifyValue = (value) => {
    if (typeof value === 'object' && value !== null) {
      // Sort object keys to ensure consistent serialization
      return JSON.stringify(
        Object.keys(value).sort().reduce((acc, key) => {
          acc[key] = stringifyValue(value[key]);
          return acc;
        }, {})
      );
    }
    return JSON.stringify(value);
  };
  return stringifyValue(args);
};

Now objects with the same key-value pairs (regardless of order) will generate the same cache key, ensuring correct memoization.

Using Immutable Data Structures (Like Immutable.js) #

If you're already using an immutable data library like Immutable.js, you can simplify the cache handling—since structures like Map return new instances when updated (instead of mutating the original):

import { Map } from 'immutable';

const immutableMemoizeWithImmutableJS = (fn, cache = Map()) => {
  return (...args) => {
    const key = serializeArgs(args);
    
    if (cache.has(key)) {
      return {
        result: cache.get(key),
        memoizedFn: immutableMemoizeWithImmutableJS(fn, cache)
      };
    }
    
    const result = fn(...args);
    const newCache = cache.set(key, result); // `set` returns a NEW Map
    
    return {
      result,
      memoizedFn: immutableMemoizeWithImmutableJS(fn, newCache)
    };
  };
};

This avoids manual object spreading and leverages built-in immutable operations for cleaner code.

Key Takeaways #

• No mutation ever: Every cache update creates a new cache object/structure, leaving the original untouched.
• State is carried forward: You have to use the returned memoizedFn for subsequent calls to build up the cache.
• Parameter consistency: Invest in a robust serialization helper to ensure equivalent inputs map to the same cache key.
• Leverage tools: Immutable data libraries can reduce boilerplate and prevent accidental mutation.

内容的提问来源于stack exchange，提问作者Shanon Jackson