CODEWITHSUNDEEP
javascriptrecursiondecorator
MORA
MORA

Reputation: 137

JavaScript - Where is the recursion?

I'm working with decorator functions and i do not want to use bind for passing this value here, instead I wanna use a wrapper function and execute the code in there. But i faced with this error -> Uncaught RangeError: Maximum call stack size exceeded

And here is the code:

let math = {
  multi(n, type) {
    if(type == 'double') {
      this.printSomething(n * 2);
    }
    else if (type == 'triple') {
      this.printSomething(n * 3);
    }
  },
  printSomething(result) {
    console.log(result);
  }
};

function cachingDecorator(func) {
  let cache = new Map();

  return function(n, type) {
    if(cache.has(n))
      return cache.get(n);

    let result = func(n, type);
    cache.set(n, result);
    return result;
  };
};

math.multi = cachingDecorator((n, type) => math.multi(n, type));
math.multi(10, 'double');

I used Chrome Developer Tools though, but I could not fix the problem.

I know that this error ocurred because there is a recursion. But where?

Upvotes: 0

Views: 46

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074435

The problem is that you're reassigning math.multi to the caching version, then the caching version of it uses the reassigned value here:

math.multi = cachingDecorator((n, type) => math.multi(n, type));
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^

Instead, you need to remember and use the original:

const originalMulti = math.multi;
math.multi = cachingDecorator((n, type) => originalMulti.call(math, n, type));
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^

Note that I had to use .call(math to ensure this is correct, since I copied math.multi to a variable; calling it directly later doesn't set this correctly.

Live Example:

let math = {
  multi(n, type) {
    if(type == 'double') {
      this.printSomething(n * 2);
    }
    else if (type == 'triple') {
      this.printSomething(n * 3);
    }
  },
  printSomething(result) {
    console.log(result);
  }
};

function cachingDecorator(func) {
  let cache = new Map();

  return function(n, type) {
    if(cache.has(n))
      return cache.get(n);

    let result = func(n, type);
    cache.set(n, result);
    return result;
  };
}
  
const originalMulti = math.multi;
math.multi = cachingDecorator((n, type) => originalMulti.call(math, n, type));

math.multi(10, 'double');

Upvotes: 4

Related Questions