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

1

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
2

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
3

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.

4

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.

5

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
6

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

7

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
8

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.