multiple errors while momoizing function inside another function

Question

I have something like this:

function main() {
  function create_node() {
    console.log("create_node")
      (function() {
        var memo;
        console.log(memo);

        function f() {
          var value;
          console.log(value);

          if (memo) {
            value = memo.cloneNode();
            console.log("clone node");
            console.log(value);
          } else {
            var value = document.createElement("div");
            var style = "";
            value.setAttribute("style", style);
            value.innerHTML = "hello";
            console.log("new node");
            console.log(value);
          }
          return value;
        }
        return f;
      })();
  }
  var colection = [];
  for (var i = 0; i < 10; i++) {
    colection.push(create_node());
  };
}
main();

the problem is I get an error (in firefox at least) while try to log "create_node". Also, if I don't return f(), instead of f, it doesn't get executed. In any case, memo is always undefined. So I have this three problems here. I guess they come from a lack of understanding on complex closures, so I'd need a Javascript rockstar to enlighten me!

Didier Aupest · Answer 1 · 2015-07-27T12:50:48.587

3

As I can't comment, I have to post a reply.

I have seen multiple issues in your code:

The create_node function doesn't have a return. So, your collection will always be empty.
You are defining two vars in the f function with the name "value". the second var value might be a bug.
The var memo is never assigned.
while you are returning f inside your anonymous function, you are not executing it.

I am guessing you are trying to do something like that:

function main() {
  var memo;   
  function create_node() {
    console.log("create_node");
    memo = (function() {
      console.log("memo:" + memo);
      function f() {
        var value;
        console.log("value:" + value);

        if (memo) {
          value = memo.cloneNode();
          console.log("clone node" + value);
        } else {
          value = document.createElement("div");
          var style = "";
          value.setAttribute("style", style);
          value.innerHTML = "hello";
          console.log("new node:" + value.innerHTML);
        }
        return value;
      }
      return f;

    })()();
   return memo
  }
  var collection = [];
  for (var i = 0; i < 10; i++) {
    collection.push(create_node());
  };
  // Display results
  for(var i = 0; i<10;i++) { console.log(i + ". " + collection[i]); }
}

edited Jul 27 '15 at 12:50

answered Jul 27 '15 at 12:12

Didier Aupest

3,227
2
23
35

your comments are right but your solution can't be right. For example, you are putting memo outside the function that is supposed to be memoized – Vandervals Jul 27 '15 at 12:55
1

I edited your code with the right answer. I do this because your clues helped me to figure it out. – Vandervals Jul 27 '15 at 13:07
`(…)()()` - are you serious? – Bergi Jul 27 '15 at 13:20
@Bergi what do you mean *are you serious?* Can you elaborate for us less experienced? – Andrea Casaccia Jul 27 '15 at 13:49
1

@AndreaCasaccia: I mean that nesting two IIFEs right in each other hardly makes sense – Bergi Jul 27 '15 at 14:26

score 1 · Accepted Answer · answered Jul 27 '15 at 14:26

I found the answer to my own question:

var create_node = (function() {
    var memo;
    console.log("memo: "+memo);
    console.log("create_node")
    function f () {
        var value;
        if(memo){
            value = memo.cloneNode();
            console.log("clone node");
            console.log(value);
        }else{
            var value = document.createElement("div");
            memo = value;
        }
        console.log("new node");
        console.log("value: "+value);
        return value;
    }
    return f;
})();

multiple errors while momoizing function inside another function

2 Answers2

Linked