Calling functions in two different ways - JavaScript

Question

I'm very new to JavaScript, so my apologies if this answer is glaringly obvious or I'm barking up the wrong tree!

What's the difference in the following code snippets:

function primeAddNum(innerHTML) {
    return function() {
        addNum(innerHTML);
        return false;
    };
}
var func = primeAddNum(innerHTML);

The second one:

var func = function() {
        return function() {
            addNum(innerHTML);
            return false;
        };
}();

The top one works the way I'd like it to, but not the bottom, but that's not overly important to me. What I want to know is the logic behind each block, because I just can't see the difference!

I know this is not the question but having anonymous functions return another anonymous function is pretty incestual. — thatidiotguy
– thatidiotguy, Commented Dec 4, 2012 at 17:43

bfavaretto · Accepted Answer · 2012-12-04 17:44:43Z

2

The problem with the second block is that innerHTML is undefined there, since you're not passing it. They will become equivalent if you change it to:

var func = function(innerHTML) {
    return function() {
        addNum(innerHTML);
        return false;
    };
}(innerHTML);

answered Dec 4, 2012 at 17:44

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

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

5 Comments

FunnyOxymoron Over a year ago

Thank you, it makes much more sense now. Can't believe I've been pulling my hair out over this one now I've seen the answer.

bfavaretto Over a year ago

Also consider what Esailija said: the second style, with the self-invoking function, is for one use only. You can't create new functions without repeating the whole thing. So, if you plan on reusing primeAddNum, use the first version.

Esailija Over a year ago

This will not make it un-undefined if it really was undefined, you are just capturing innerHTML instead of relying on an outside reference. Which is of course good but depending on the code not necessary.

bfavaretto Over a year ago

@Esailija I'm assuming innerHTML was just an example, not a global var (or anything in scope). The first snippet (which works according to OP) passes that as a parameter to the outer function. I just adjusted the second one to do the same, as I can't see any reason why it wouldn't work otherwise (again, OP states that the second version did not work).

FunnyOxymoron Over a year ago

Correct, I should have specified this. It is not a global variable but rather one that loops and changes dependent on a user event. Thanks to both anyway.

Esailija · Accepted Answer · 2012-12-04 17:43:56Z

1

Well with the second one you can only create a func once. But with first one, you can create many:

var func1 = primeAddNum(innerHTML);
var func2 = primeAddNum(someOtherInnerHTML);

answered Dec 4, 2012 at 17:43

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

thiagoh · Accepted Answer · 2012-12-04 17:43:37Z

-1

there is no difference, you can use both without any problems

answered Dec 4, 2012 at 17:43

thiagoh

7,4588 gold badges55 silver badges78 bronze badges

Collectives™ on Stack Overflow

Calling functions in two different ways - JavaScript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related