What's the order of execution of code in this example?

Can someone please help me understand the following function. The order it executes in and how to generally create this sort of function. What exactly is the idea behind them?

I know it’s a self calling function, but that’s about it. I feel like i definitely am missing out on important details regarding this one.

var a = 2;

(function IIFE( def ){
    def( window );
})(function def( global ){

    var a = 3;
    console.log( a ); // 3
    console.log( global.a ); // 2

});

I guess, but i am not sure, it would be something like this:
The encapsulation calls itself and starts with the function def and parameter global and once it finishes with the console log it moves on to the IIFE function

1 Like

This is interesting. I didn’t think you can write it like that :smiley:
function IIFE is called Immediately Invoke Function Expression, which means function IIFE was immediately called.

the function expression by itself looks like this.

( function IIFE( def ) {
   def( window );
})(...);

The argument it receive is a function. But the expression itself is not enough to do anything because of the parameter is not filled with anything.

Then we see the next set of expression…

function def( global ) {
   var a = 3;
   console.log( a );
   console.log( global. a );
}

This function gets executed inside of IIFE function immediately.
window object gets pass onto def( ) function, and then calls console.log( a ) in its local scope, and then calls console.log( global.a ) the global scope a.

1/  var a = 2; //global variable is declared
2/ ( function IIFE( def ) { ... } ( function def(...) ); // IIFE is immedately called passing def( global ) function as argument.
3/ IIFE executes def( ... ) function passing to it a window object
4/ Within def( ... ), it creates a variable a in the function scope.
5/ Call console.log( a ); // The function scope a, which is 3
6/ Call console.log( global.a );  //Which is calling window.a = 2;

This is how it is being process in my brain. :smiley:

1 Like

I think @Cowwy has it right. I haven’t used this kind of structure very much, so I had to do some research. I found this link helpful: Immediately Invoked Function Expressions.

i did look at that page, but i am not sure i got the info right

how would you use the following structure then and for what

(function(){ arguments.callee(); }());

(function foo(){ foo(); }());

Also it looks to me more like it’s not the first function that gets called first, but rather the second one, which calls itself recursively


Found a working example, think i will get some sleep before trying to understand it though. Can’t figure it out.

https://jsfiddle.net/jonataswalker/rafwbhf0/

The second function is only a definition. The thing that causes execution is the second set of parenthesis. Consider this example:

(function first_function (func) {
    console.log("In first function");
    console.log("The argument to this function is of type: " + typeof func);
    console.log(func());
    return 1;
})(function second_function (some_arg) {
    console.log("In second function");
    return 2;
})

The result will be:

In first function
The argument to this function is of type: function
In second function
2
1

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

i would normally use this to wrap my programm in so as to have no global varaibles

my programm code...
})();```

you can also pass in params in end () 

what he has is a function that takes a function as a param (top self invoking function)
and rather than have this function in the global scope he wrote it in that end () ... which also i believe means it can only run the one time and cant be called again.

you could change it slightly and do this
```(function(def){
rest of function ....
})(def);```

function def(){
rest of function ....
};```

it will run the same but now the def function is in the global space and can be called again and again

you could also wrap entire code in 
```(function(){
var a =2;
function.....
function...
})()```

it will run but now the var a = 2 is no longer in the global space and will come back undefined

nice example though had to look closely to see what i could do with it 
heres a repl i did to mess around with
https://repl.it/Fx3c/0
1 Like

Thank you John. That’s very detailed and helpful. Also thanks for sharing the widget.

@Ariel I’ve read the rules. But some things you forget about after a while. This wasn’t intentional.