Assigning a function to a variable in Javascript & calling it with the declaration

Question

I am coming from a Python background & have recently started learning Javascript. I am a bit hung up on how functions are assigned to variables & how they return data.

Please consider the following object:

const stats = {
    max: 53.8,
    min: 34.9,
    std: 6.5
};

When I just declare a plain function & log, I get the appropriate output:

function half(stats) {
    return (stats.min + stats.max) / 2.0;
};

console.log(half(stats));

However, the tutorial I am referring to uses a somewhat weird way to get the same thing done, like so:

const half = (function() {

    return function half(stats) {
        return (stats.min + stats.max) / 2.0;
    };
})();

console.log(half(stats));

What I do not understand here is:

The need for two nested returns (Seems fairly simple function, I don't see why we need 2 returns)
The parenthesis that starts before the function keyword & ends with the larger block
Most intriguingly, the (); at the end of the entire block, implying the function is being called as soon as it is declared?

Also, when I try to rewrite the same thing in a simpler way using my experience in Python, that seems to do the trick as well. Like so:

const half = function(stats) {
    return (stats.min + stats.max) / 2.0;
};

console.log(half(stats));

Can anyone please explain to me what's happening in the code provided by the tutorial? Also, perhaps you can do so by answering the 3 questions I posed above. Thank you!

It's an [IIFE](https://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript). But I can't see any purpose for it in this case. — Barmar, Oct 01 '20 at 04:59
Can you add a link to the tutorial? Maybe there's some additional context that would explain why they did it this way. — Barmar, Oct 01 '20 at 05:02
Does this answer your question? [What is the purpose of a self executing function in javascript?](https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript) — Nine Tails, Oct 01 '20 at 05:04
@NineTails Which of the answers there explains why it's used in this case? There's no scoping in the IIFE that needs to be hidden. — Barmar, Oct 01 '20 at 05:07
@Barmar I can't tell without looking into the tutorial that OP mentions, hence I didn't mention a specific answer. — Nine Tails, Oct 01 '20 at 05:17
@NineTails My point is that I don't think there's any good reason why it's used in this case, so none of the answers would explain it. — Barmar, Oct 01 '20 at 05:20
Ok. I can now understand that it's an IIFE. So without the internal `half` function declaration, the external `half` variable will actually be assigned the returned value & not the function itself. But I do not understand how can it be immediately invoked without passing the required argument. For reference, the tutorial comes from the following YT video from freeCodeCamp.org : https://www.youtube.com/watch?v=PkZNo7MFNFg&t=11105s — truthseeker00, Oct 01 '20 at 05:35

score 0 · Answer 1 · answered Oct 01 '20 at 04:58

0

Refer this. https://www.w3schools.com/js/js_function_closures.asp ( towards the end )

answered Oct 01 '20 at 04:58

keshav

135
4

Except it's not closing over any variables. This is just an IIFE. – Barmar Oct 01 '20 at 04:58
Whilst this may theoretically answer the question, [it would be preferable](//meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Barmar Oct 01 '20 at 05:01
I will take care of that. Thanks for the suggestion. @Barmar – keshav Oct 01 '20 at 05:05

score 0 · Answer 2 · answered Oct 01 '20 at 05:44

There are a couple of concepts you have to know here,

Function declaration

 function half(stats) {
        return (stats.min + stats.max) / 2.0;
    };
    
    console.log(half(stats));

Function expression

 const half = function(stats) {
        return (stats.min + stats.max) / 2.0;
    };
    
    console.log(half(stats));

Read more - https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

Immediately invoked function expression

const half = (function() {

    return function half(stats) {
        return (stats.min + stats.max) / 2.0;
    };
})(); // this will immediately execute without any invocation

console.log(half(stats));

Read more here - http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html

closure - https://www.tutorialsteacher.com/javascript/closure-in-javascript

So, for the IIFE, is it able to immediately execute without any arguments because it only returns the uninvoked internal function? If so, what's the purpose of the internal function & immediate execution? Wouldn't it be simpler to just use a function expression like in your example? — truthseeker00, Oct 01 '20 at 06:12

Assigning a function to a variable in Javascript & calling it with the declaration

2 Answers2