0

I have a decent feel for scope and execution flow, but I'm having trouble grasping why this doesn't work:

var modalWindow = (function() {
    // Other code...
    modalBtn.addEventListener('click', modalWindow.closeModal);
    return {
        closeModal: function() {
            modalContainer.remove();
        }
    }
}());

And this does: 

var modalWindow = (function() {
    // Other code...
    modalBtn.addEventListener('click', function() {
        modalWindow.closeModel());
    });
    return {
        closeModal: function() {
            modalContainer.remove();
        }
    }
}());

The first throws modalWindow is undefined. I know I could just declare a named object and place closeModal in it, then reference it, and I wouldn't need the anonymous function in the listener. But I'm curious as to why the latter works as is.

silencedogood
  • 2,031
  • 1
  • 4
  • 23
  • @Quentin Perhaps I'm wrong, but it seems like this doesn't really answer my question... `modalContainer` is a peripheral issue here. – silencedogood Aug 13 '19 at 13:41

1 Answers1

2

The code you provided has an unmatched (.

I'm betting the end really looks something like:

})();

The value of modalWindow is the return value of the IIFE … but it doesn't get that value until the IIFE has finished executing and actually returned a value.

Until then, the value is undefined so when you try to read it before the IIFE is finished, it errors.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • Yea, I edited the code to reflect the IIFE. I know this is the issue. I just don't understand why enclosing it in the anonymous function causes the event callback to _wait_ on the returned value. – silencedogood Aug 13 '19 at 13:47
  • 2
    @silencedogood Because then it doesn't try to evaluate `modalWindow` until that function is called… – deceze Aug 13 '19 at 13:48
  • You can't copy something out of the book of instructions before the book is written. You can write an instruction that says to copy something out of the book of instructions later on. – Quentin Aug 13 '19 at 13:50
  • @Quentin I'm having trouble grasping the _why_ aspect. I'm just not getting why the anonymous function here forces it to wait until the book is written... I don't know I guess I'm just slow :) He stated that 'it doesn't try to evaluate `modalWindow` until that function is called.' I understand that, I'm just not seeing why. It's a portion of code that gets executed whether it's an anonymous function or not... – silencedogood Aug 13 '19 at 13:54
  • 1
    If its a function then it **doesn't** get executed (at least not until much later when the function is called). – Quentin Aug 13 '19 at 13:55
  • Alright I get it. I found a very thorough explanation here https://stackoverflow.com/questions/35509877/event-listener-with-anonymous-function so I suppose this could be duped. – silencedogood Aug 13 '19 at 14:08
  • @Lain That's a good point! Another reason why this is confusing to me :| Oh well, I guess the bottom line is that with the code within the anonymous function, it gets encapsulated and treated as something akin to a callback function within the listener that can be executed _later_. So the listener can now stash the function and not execute it... I don't know why it can't to this with the function in the return object as well though, especially as you pointed out I didn't use the `()`. Now you've confused me all over again. – silencedogood Aug 13 '19 at 14:46