Javascript Function Declaration vs Function Expression

There are multiple ways to define a function in Javascript. Since there are only subtle differences between each, it can be confusing at times for someone making baby steps in JS. So in this post, I will discuss a few different ways, along with my thoughts about each.

• Function Declarations
• Function Expressions
  • Anonymous Function Expressions
  • Named Function Expressions
  • Immediately Invoked Function Expressions

Function Declarations

It’s the regular way to use functions, and it resembles the same on other languages like PHP. The declaration starts with the word ‘function’ followed by the name of the function.

Here is an example:

function weather() {
    console.log("it is raining outside");
}

weather();

Output:

it is raining outside

Here, note that the function call comes after the declaration. But, the following also works without throwing any errors:

weather();

function weather() {
    console.log("it is raining outside");
}

Output:

it is raining outside

If you are thinking: How does that work? We called the function before declaring it?

The answer is Function Hoisting. With hoisting, javascript puts all function declarations before other statements. So, it doesn’t matter where you make the function call.

That’s function declarations in simple words. Next let us look at function expressions.

Function Expressions

Let us do the same thing above, but this time using an expression.

weather();

var weather = function() {
    console.log("it is raining outside");
    console.log(weather);
}

Here we have assigned the function to the variable ‘weather’. However, the above code will throw an error:

Output:

TypeError: weather is not a function

The reason is, function expressions does not support hoisting. So, we have to always make the call after defining the function, like the following:

var weather = function() {
    console.log("it is raining outside");
    console.log(weather);
}
weather();

Output:

it is raining outside
[Function: weather]

Despite the lack of hoisting, I tend to use function expression more often these days than regular function declarations. For me, it feels more clear. Also expressions force us to put the calls after the definitions, making the code look neater.

Anonymous Functions

Another point is, despite assigning the function to a variable, we haven’t put any name after the word ‘function’. So, such a function is called an anonymous function.

Named Function Expressions

You can also give name to function expressions:

var weather = function w () {
    console.log("it is raining outside");
    console.log(weather);
    console.log(w);
}
weather();

Note the w after function.

Output:

it is raining outside
[Function: weather]
[Function: w]

But, the following won’t work:

var weather = function w () {
    console.log("it is raining outside");
    console.log(weather);
}
console.log(w);
weather();

Output:

ReferenceError: w is not defined

That means, the scope of the name w is limited inside the function.

Immediately Invoked Function Expressions

It’s my go-to-way when I want to write some simple scripts for the browser, and it looks like this:

(function() {
    console.log("it is raining outside");
})();

It neither needs a call nor it have a name. Such functions are executed right away when the script is loaded. Moreover, since it is a function, the variables defined inside it will not pollute the global scope.

Conclusion

So, I have mentioned a few common ways to use Javascript functions. There are more. But so far these techniques served well for my requirements. What about you? Which is your favourite method to define functions. Say it in the comments.

Useful Links

• Functions – Javascript | MDN
• 6 Ways to Declare Javascript Functions