Category: JavaScript snippets and notes

Hey there! How’ve been doing? Today, I would like to make clear to myself and to you who probably read my blog or for the anonymous user who bumps onto this post some things about IIFE, the infamous Immediately Invoked Function Expressions. I bet you have already used one of these even with or without your knowing about it!

Function Expressions

First of all, I would like to explain in plain words what is a Function Expression! Well, it is chunk of code that returns a value and it does not have to necessarily be saved in a variable! E.g. try this in the JS console:

a = 1; 
<- 1

you will get back 1, which is the value allocated in memory by the = operator associated with the global variable a, or if you just do some math without storing the value in a variable, e.g

1 + 3;
<- 4

A function expression consequently looks something like this:

var hello = function() {
    console.log('Hello!');
}

A function statement on the other hand looks like this:

function hello() {
    console.log('Hello!');
}

So, you ask what is the difference? Well, the statement does not return a value, it just sits there waiting to be invoked! Another thing that you should be aware of this that due to hoisting, when the JS engine parses the code line by line it checks for function statements or variables first. For the former it creates a function object and puts it in memory and for the latter allocates space in memory too, but with the difference that if some variable is not initialized, JS engine initializes it by giving to it the special value undefined! This is visible in this practical example:

hello();
function hello() { 
    console.log('Hello!');
}

helloAgain();
var helloAgain = function() { 
    console.log('Hello!');
};

When helloAgain is invoked: helloAgain(), the value of the variable helloAgain in the current position is undefined, so we get the following error in the console:

Uncaught TypeError: helloAgain is not a function

and with good reason. Because the invocation () can only be applied to functions! As for the first function it is already initialized in memory as a function, so it doesn’t throw an error!

IIFE: build from the bottom up

How did IIFE come to life though? Some weird guy maybe thought to himself: “Why not invoking a function immediately after I define it?”. So, he did this:

var hello = function() {
    console.log('Hello!');
}();

As you can imagine this will log Hello! in the console. Why? Because we invoke the function expression immediately! Let’s try to add to this… Instead of console.log we will return the value so it can be stored in the variable hello!

var hello = function() { 
    return 'Hello!'; 
}();
console.log(hello);

Here we are! We are getting the same result! Let’s give it an argument too…

var hello = function(name) { 
    return 'Hello ' + name + '!'; 
}();
console.log(hello);

Now we are getting back Hello undefined! Right? This is because we didn’t pass the argument to the function invocation! Let’s fix this…

var hello = function(name) { 
    return 'Hello ' + name + '!'; 
}('George');
console.log(hello);

Much better, huh? So far we are logging the value of the variable hello, which happens to hold on to a function object and we are passing a string literal to it while invoking it! Dead simple, right? What’s the catch here? The catch is that that the variable does not hold a function object anymore but the value that the function object returns while it is being invoked! This means that hello now is a STRING! Meaning that if we try this: hello(), we will get an error saying: hello is not a function!

Let’s add to this more… How can we get this to be standalone? Ideally we want to have the function sitting there doing its stuff, something like this:

function(name) {
    console.log('Hello ' + name + '!');
}

What happens if we run this? Exactly: we get a syntax error about unexpected token ( !!! Yes, but we want to use the function expression like an expression literal: if we add in our code something like: 3 + 4; the parser doesn’t do anything, it just continues parsing the code! In the above example it just throws a syntax error! What could we possibly do? We have to trick the parser with the grouping operator! Here we go…

(function(name) {
    console.log('Hello ' + name + '!'); 
});

Dear Lord! We have a function expression now sitting idle! No errors! Ok, now what? What is so special about a function object? Yayyy, we can invoke it! So…

(function(name) { 
    console.log('Hello ' + name + '!'); 
}('George'));

So, here we are nice and tight! We invoke a function expression and we can pass an argument to it too! Pretty awesome! And now we can get back the string: “Hello George!”.  All in one line!

One last thing: you can put the invocation outside the grouping parentheses like this (it is a matter of taste):

(function(name) { 
    console.log('Hello ' + name + '!'); 
})('George');

Cheers!