Iffy about IIFE's?

So I'm in this coding bootcamp and we just started learning about JavaScript. This is going straight from learning Ruby as my first programming language mind you so JS pretty much looked like spaghetti code at first. THEN in comes the IIFE which at first glance to me was like unorganized spaghetti. However, upon further investigation I found I couldn't be more wrong and have since fallen in love! So if you were at all like me and felt totally iffy about IIFE's then I hope this helps to shed some light on them and maybe even get you to start using them because... I mean they're awesome.

What is an IIFE?

The acronym stands for Immediately Invoked Function Expression and is pronounced just like the word 'iffy'. Previously known as the self-executing anonymous function it was given the more accurate name IIFE by a Boston based web developer named Ben Alman. An IIFE is an anonymous function that is invoked immediately after being declared. The two sets of parenthesis are what gives us all the magic of the IIFE. The first being the Grouping Operator parentheses which enclose the function and allow local scoping. The second set of magical parentheses are the ones at the end of the function which will call the function.

How they're written:

(function () {
  //code here
})();

Locking it Up

One of the really cool advantages that IIFE's offer us is that they grant us the opportunity to "lock up" an entire app or program within the scope of one big function, doing away with a lot of scoping issues. We can encase the variables and functions that we'd like to all be in one scope inside of our Immediately Invoked Function Expression. No more having to globally scope variables that you'd like to use in other functions! IIFE's, like all other functions, create for us a local scope so everything inside is "locked up".

(function () {
    const thiss = "this "
    const that  = "that" 

    function thisThat() 
{
   console.log(thiss + that) 
}

thisThat()

})()

// 'this that'
// undefined

In the above code I created an IIFE function and then within said function made two variables - "thiss and that". I then created another function within my IIFE called thisThat. This function adds my two variables together for an end result of 'this that' being displayed on the console.

Aside: "this" is one of JavaScript's reserved words and therefore cannot be used as a variable name.

IFFE's as variables?!

Well an IIFE IS a function isn't it? And all functions can be stored as variables so why not immediately invoked ones? However, there is one key difference when it comes to storing an IIFE as variable: When you assign an IIFE function to a variable the return value of the function is stored, whereas when you assign a regular function to a variable, the function definition is stored.
This happens because the function is immediately invoked and therefore storing an IIFE is the same as defining a function and then storing that functions return value after calling it. Here's a really simple example to see how this works.

Regular Function:

   let twoTimesTwo = 
function multiply() {
  return 2 * 2       
}

//  ƒ multiply() {
//    return 2 * 2       
// }

IIFE:

let twoTimesTwo = 
(function () {
   return 2 * 2
})()

// 4

IIFE's and parameters

IIFE's are super cool with parameters which is totally awesome! Adding parameters to your IIFE is really easy too. All you have to do is throw in a few variable names within the set of parentheses after the word function and define the variables within the final set of parentheses that call the function. You can then do whatever work you'd like with the variables within your function. Here's a super simple example of what that looks like.

(function (some, odd, variable) {
      return some + odd + variable
})("A ", "random ", "sentence.")

// "A random sentence."

Aside: All functions (so IIFE's included!) can accept a seemingly endless amount of parameters. Here's a funny little function that illustrates my discovery. The IIFE below accepts 26 parameters!

(function (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z) {
    return (a * (b + c) / (d + e) - g) + ((h + i) * (j % k) / l) - (m * n) + ((o % p) * (q + r)) / s * t + ((u + v) % (w * x) - (y + z))
})(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26)

// 370.35380116959067

Conclusion

During my time coding so far, I've noticed that terminology alone can be one of the most daunting aspects of learning new coding concepts. However, I've also found that quite a few of these terms just sound complicated and the concepts behind them are pretty simple. An Immediately Invoked Function Expression definitely sounded like something I might never wrap my head around when I first saw the term, but IIFE's are super easy (and fun!) to use. The main reasons to use an IIFE function are they save you the hassle of any pesky global variables or functions. Because of the protection that IIFE's give to their variables and functions, those variables and functions don't know about globally scoped variables and functions and can therefore share the same name. IIFE's can also just help give some organization to your probably wild looking JavaScript code and make it more readable.