I've been using IIFE in JavaScript
and in AngularJS
and have been using the following structure:
Method 1:
//IIFE Immediately Invoked Function Expression
(function () {
}());
However, I've seen the following often where a variable is assigned to the IIFE
Method 2:
//IIFE Immediately Invoked Function Expression assigned to doStuff variable
var doStuff = (function () {
}());
NOTE: This question is NOT about what this pattern is or what an IIFE is. This is pertaining specifically to why one would use a return variable on an IIFE and its relation to Angular practices as well.
In Angular Method 1 works fine, but in many of the raw JS examples I see, Method 2 is used. My assumption is that anything encasulated in doStuff
will be avliable via it and callable. However, I'm not 100% sure on the exact reasoning or distinction between the 2 methods and need some help understanding when to use the different methods?
Advantages of IIFE: Do not create unnecessary global variables and functions. Functions and variables defined in IIFE do not conflict with other functions & variables even if they have same name. Organize JavaScript code.
An Immediately-invoked Function Expression (IIFE for friends) is a way to execute functions immediately, as soon as they are created. IIFEs are very useful because they don't pollute the global object, and they are a simple way to isolate variables declarations.
Since the anonymous function within this IIFE is a function expression, and it's not being assigned to any global variables, no global property is really being created. And all the properties created inside of the IIFE are going to be scoped there. It's only going to be available inside the IIFE but not outside.
It is a JavaScript function that runs as soon as it defined. An IIFE (Immediately Invoked Function Expression) can be used for avoiding the variable hoisting from within the blocks. It allows the public access to methods while retaining the privacy for variables defined in the function.
The reason for Method #2 is that you'll find code within the IIFE that returns something (typically, but not necessarily, an object or a function). What the IIFE returns is what ends up being assigned. E.g.:
//IIFE Immediately Invoked Function Expression assigned to doStuff variable
var doStuff = (function () {
var privateInformationForDoStuff = 0;
function doStuff() {
console.log(++privateInformationForDoStuff);
}
return doStuff;
}());
There, the variable ends up being a reference to a function that, each time it's called, gives us a number higher than the previous time. The IIFE is there to ensure that nothing can modify the privateInformationForDoStuff
variable, it's entirely private to the doStuff
function.
It was common to use this (sometimes called the "revealing module pattern") to create objects with various functions on them which might also have private information that's only shared within the "module":
var MyApp = (function() {
var privateModuleInformation;
var morePrivateModuleInformation;
// ...
function doThis() {
// ...
}
function doThat() {
// ...
}
function doTheOther() {
// ...
}
return {
doThis: doThis,
doThat: doThat,
doTheOther: doTheOther
};
})();
In modern environments you'd use an actual module instead, but that didn't used to be an option.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With