Javascript 101 – Functions and IIFEs

We are back again with some more beginners lessons in the world’s most popular programming language, JavaScript. Today, we will be chatting about functions, and the Immediately Invoked Function Expression (IIFE) which tends to confuse some people.

Let’s start with understanding what a function is. At its core, a function is a package of commands that represent (you guessed it) a particular function. Let’s consider the really simple function below:

function () {
console.log("Hello World");
};

This function simply logs the words ‘Hello World’ out to the console. Simple, huh? Now let’s consider that a function can be assigned to a variable:

var helloWorld = function () {
console.log("Hello World");
};

Now we have assigned our function to the variable helloWorld, we have it stored somewhere on the memory heap and can invoke it using the variable name. So if we were to put the following in our code, we can execute the function we wrote:

helloWorld();

Now we are starting to get to grips with functions, it seems pretty obvious that the example we have given, is pretty useless in the real world. Functions really derive their power through their use of arguments, and if you were wondering what the parentheses mean, it will all become clear. In JavaScript, you can pass arguments (or parameters) to a function. Let’s write a new function:

var square = function (n) {
console.log(n * n);
};

Now if we invoke it, and pass in the number 5:

square(5);

The number 25 if printed to the console. Cool, eh? Now we can start to realise that functions can wrap up common groups of code so that we can use them throughout our app. Hang on though, there is one more powerful feature that functions have up their sleeve. They can return a value. In the example above, we printed out the result of the function call to the console. But what if we needed to do something else with the value? Well, we could write another function, but then we start to defeat the purpose of wrapping up common code with functions. Let’s introduce the return expression into our square function:

var square = function (n) {
return n * n;
}

Now if we invoke it, we can assign the result of the function to another variable:

var result = square (5);

In the code above, we have declared a variable called result, called the square function, and passed in the value 5. The function has executed, and has returned the value 25 back to the invoking code, and assigned it to the result variable. As you can see, functions are now looking pretty powerful. If you can imagine a large maths app, functions such as the square function would be pretty useful to the programmer as code can be separated up into blocks.

Let’s just finish up by explaining the Immediately Invoked Function Expression. If you have used libraries such as Angular.JS or jQuery before, you have probably come across expressions such as:

$(document).ready(function() {
// code
});

Or

myApp.run(function() {
//code
});

These expressions mark the entry point into the application, and provide a place to put any code that you want to immediately invoke when the app starts. Makes sense, right? But how do we do this in vanilla JS? If you look through the source code for jQuery / Angular / Ember / React or whatever library you are familiar with, you may come across a funny looking expression in the following context:

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

Can you guess what this is doing? By wrapping a function in brackets, you are marking it out as a whole unit in the execution chain. By following this with () parentheses, you are essentially asking the function to execute itself, immediately. This is the IIFE.

Leave a Reply

Get a Quote

Call us or complete the form on the right and we'll get you a quote estimate ASAP.

Alternatively you can use one of the methods below:

Call us: 03 8528 1124

Email us: [email protected]

Close Form