1

I'm trying to learn about closures and came across this bit of code from MDN. I tried it in jsbin and it works, but I can't figure out why it's necessary to assign makeFunc to var myFunc and then calling myFunc rather than just calling makeFunc, which doesn't work.

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}
var myFunc = makeFunc();
myFunc();
7
  • 2
    makeFunc()(); works. Or if you change the return to return displayName();, makeFunc(); would then work. Commented Jun 21, 2017 at 16:43
  • "rather than just calling makeFunc" But you are calling it in var myFunc = makeFunc();. Not sure I understand what you are confused about. Commented Jun 21, 2017 at 16:46
  • @FelixKling they seem to not understand why simply calling makeFunc() does not trigger the alert. Or at least that's my guess. Commented Jun 21, 2017 at 16:47
  • "doesn't work" is certainly not a useful problem description, because your expectation of how it "should work" is probably completely different than ours. But we cannot really help you if you don't explain your perspective. Commented Jun 21, 2017 at 16:49
  • yes. you can leave myFunc away. Simply do makeFunc()(); Commented Jun 21, 2017 at 16:49

4 Answers 4

4

I can't figure out why it's necessary to assign makeFunc to var myFunc

That isn't what is happening. Look at the code:

var myFunc = makeFunc();
                     ^^

makeFunc is being called. It is its return value that is assigned to myFunc.

That return value is displayName (which has access to the closed over name variable).

myFunc(); then calls that function.

Sign up to request clarification or add additional context in comments.

Comments

1

makeFunc is returning a function called displayName which includes the value of "Mozilla" within the variable name which is only accessible within the displayName function (although it doesn't "know" that it was originally called "displayName"...it just simply now contains the body of that function along with the value of name). When you assign the result of calling makeFunc to myFunc, myFunc contains the function displayName, including the value of name. Note, however, that displayName has not yet at that point in time been called/invoked. Now, when you invoke myFunc, displayName is run, creating an alert showing the name "Mozilla".

Comments

-1

I'll try to give a very short answer:

makeFunc() only returns the function without executing it because the return value is the name of the function.

var myFunc = makeFunc();
myFunc();

From the code above you're assigning the function that I previously mentioned to myFunc. On the next line you add a () which means execute the function. Hence why you see the alert(); result.


Illustration

makeFunc() == displayName
myFunc == makeFunc()
myFunc == displayName
myFunc() == displayName()

Comments

-2

On page load closure allows a function to run automatically

FOR YOUR CODE -- you can re-adjust your code to this like you anticipated without assigning it to variable myFunc

(function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
})();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.