Function Declaration vs Function Expression

Table Of Contents

1. Introduction
2. Definitions
3. Key Differences
4. Conclusion

Introduction
So for this week's learning, I thought I would touch on the difference between function declaration and function expression. Even though I have been learning JavaScript for more than a year, I still feel there is so much to cover. This was one of the challenge I faced while learning JS earlier on and I thought I would document my learnings and understanding so far.

Definitions
So what is function declaration?
Function declaration is a way of declaring a function with the function keyword. So an example of a structure would be as follows:

function calNum(paramA, paramB) {
    // Set of statements
};

To call a function declaration, you would call it like this: calNum().

So what is function expression then?
In short, function expression can be store in a variable assignment. Something like this:

const calNum = function(A, B) {
    // Set of statements
};

Or if you are using ES6 syntax, you can make use of arrow functions => to declare your function expression and omit the function keyword. Like this:

const calNum = (A, B) => {
    // Set of statements
};

To call a function expression, you would call it similar to a function declaration, like this: calNum().

Key Differences
So you might ask, what is the difference between both types? they seem to serve the same purpose of defining a function. Well, there is one key difference which make both types serve different use cases.

Function declaration can be hoisted while function expression cannot. This means that for function declaration, even if you call the function above the line of code where you define the function, the function would still work as the function is available "at the top" and "globally" in your code base rather than on the position in which you created your code. For example:

calNum(); // will not have an error, the function will execute

function calNum(A, B) {
    // Set of statements
};

However with a function expression, this is not possible and an undefined error will be generated. Function expression will execute only when it reaches that line of code. So you must always call it after you define a function expression.

So you may think since function declaration is hoisted, it's use case is pretty strong as compared to function expression. However it actually depends on when and where you wish to call a function. By having a function available globally, it pollutes the global scope making the codebase more congested than it really should be. In order to prevent this, we can use Function Expressions to execute the function as once it is done executing, it will be forgotten immediately. An example of this use case is using the defined function as a callback can be seen below:

function calNum(A, B) {
    // Do something
};

array.filter(callNum)

In this instance, we are using a function declaration for calNum which is available globally even though we are only going to use this function in one instance. By using a function expression to define the callNum, the function block will be forgotten once the callback is executed. This makes the global scope less congested as the function is not stored.

Another difference between function declaration and function expression is that the function itself can be anonymous. For example:

array.map(function(A, B) {
    // Do something
}); // The function will still work.

The function defined in the map() method works even though is not named. However, it is encouraged to name your function as it will aid in debugging and organizing your code. A simple change like this:

array.map(function count(A, B) {
    // Do something
}); // function named as count.

Conclusion
In conclusion, if you want your function to be available globally, function declaration will be the way to go. If not, function expression should serve most of your needs as they can often result in cleaner and more readable code. Moreover, function expression are more flexible especially with the introduction of arrow function in ES6. I know I am not even close to covering the difference between both ways of defining functions, however this is what I understand so far. I will update the post as I become more and more proficient in JavaScript. For now, that's all folks!