In this guide I'm going to talk about how you can work with immediately invoked functions in typescript and if you're wondering when we're actually going to get to closures we have some things that we need to set the foundation for before we can get into even understanding what a closure is. You know how to actually implement one. So what we're doing with doing things like talking about function expressions and immediately invoked functions. This is all setting the foundation for being able to understand closures.

So immediately invoked functions are exactly how they sound, they're immediately invoked. So if we had a function like the one we've created multiple times, the full name function just like this, and we return the full name right here. In order for this to actually work we need to come down and we need to call it you know so we have to come in here and then pass in the values in order for this to work. Now that is a traditional declared function and function expressions are also similar in the fact that they need to be called. However typescript and JavaScript also have the ability to have immediately invoked functions and these are things that will process just without even having to be called. The second that they run or the second that the interpreter gets to this line of code. It's going to run the code inside of it, it doesn't have to be called separately.

function fullName(first : string, last : string) {
  return …
}

fullName(‘Jordan’, ‘Hudgens’);

So I'm going to walk through how this works by creating a very basic counter. So I'm going to have a list of names and it's going to be a string array. Inside of it I’ll just put some names and I'm also going to declare a counter variable I’m going to say var counter. It's going to be a type number and it's going to start off on zero. Now what I'm going to do inside of here is I'm going to create an immediately invoked function in the syntax for that is we start with parentheses and we'll type in the word function and then follow that up with parentheses. Any arguments it would have would go inside of there but this one is going to have any arguments and then I will have curly braces and now everything that we want to process inside of the function is what is going to be in here.

So I'm going to create a basic for loop all create a iterator variable named name. We're not going to use a value we're just going to use it to count up something and say let name in names. And now I'm just going to have our counter increment up with each time. Now this is only part of it coming down to the bottom. We have to also place a parenthesis here. And what this is going to do is it's going to tell the JavaScript interpreter that this is an immediately invoked function. So whenever it gets to line 4 then process all of the code inside of here and to test that this is working. We're going to say console log that we're not going to do anything actually related to the function. We're simply going to console log the value of the counter. So with the way that variables work in JavaScript we made this globally available in this file here. And so when function runs it's going to increment this counter up by the total number of names in the array. So if this all works then our counters should actually equal three.

var names : string[] = [‘Jordan’, ‘Tiffany’, ‘Kristine’];
var counter : number = 0;

(function() {
  for (let name in names) {
    counter++;
  }
})();

console.log(counter);

So I'm going to come here and process this code this is 018_immediatley_invoked_functions. And if I run this you can see it prints out 3.

So it's pretty straightforward, but I wanted to dedicate a full guide to it because this is code that you're going to see some very similar things written in. When you work with languages or with frameworks like angular 2 and different things like that so I wanted you to become familiar with it. And so any time that you see this type of syntax this means this is going to be an immediately invoked function in typescript.

Resources

• Source code