Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

Could someone explain what an iife is?

What I understand about this concept is that its a function that calls itself. However, I don't get how the the expression part though...

I've heard the following explanation, but I still don't understand:

'This is the way to tell the parser to expect a function expression, because in JavaScript, parentheses can’t contain statements, for example you can't pass a switch statement as an argument to a function...The parentheses trick the parser to treat function declaration as an expression, so it won't throw an error if we immediately call it or if we don't give a name for this function.'

3 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

An Immediately Invoked Function Expression (IIFE) is not "a function that calls itself", but it is a function that is defined and invoked (called) at the same time. This is often done to create a "closure" to encapsulate another function along with some associated variables.

This MDN page has some examples and links to additional information that may be helpful.

Kristian Woods
Kristian Woods
23,414 Points
Kristian Woods
Kristian Woods
23,414 Points

Why does it matter that the parser expects a function expression?

Is this the same as: ? 

let myFunc = function() {
  // do something
}

The above is a function expression, right? Why is that distinction important?

Alexander La Bianca
Alexander La Bianca
15,960 Points

This function expression is not executed until you do myFunc(). Whereas 

let myFun = (function(){
//this is executed right away
})()
Alexander La Bianca
Alexander La Bianca
15,960 Points
Alexander La Bianca
Alexander La Bianca
15,960 Points

Steven provided a good answer. To add to his answer I have below an example on what can be done by creating a closure. A lot of libraries do this to create their public api. Below is an example how you could write your own by extending jquery. This is done by immediately invoking the function with jquery as an argument. It is important to load jquery before you load this though. 

myLib = (function(jquery){
    jquery.MYLIB_VERSION = '1.0.0';

    var privateFunc = function() {
        console.log('I am not available outside');
    }

    //this function will be available outside
    jquery.myownfunction = function() {
        console.log('executed my own function by extending jquery')
    }

    //if you wanted to use privateFun in the outside you need to return it
    //return {
        //privateFunc : privateFunc
    //}

})($);


$.myownfunction(); //will work as it is now an extension to jquery
//but $ still works normally
console.log($('#title').text());

myLib.privateFunc(); //will not work unless you uncomment the return in myLib

Here is an additional good resource on where this is mostly used and why and how

https://toddmotto.com/mastering-the-module-pattern/