Function Declaration vs Function Expression
Tags: javascript, beginners, webdev, codenewbie
Published: 2022-06-14 07:58:22

## Table Of Contents
[1. Introduction](#chapter-1)
[2. Definitions](#chapter-2)
[3. Key Differences](#chapter-3)
[4. Conclusion](#chapter-4)


<a name="chapter-1">Introduction</a>
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. 

<a name="chapter-2">Definitions</a>
_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:
```Javascript
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:
```Javascript
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:
```Javascript
const calNum = (A, B) => {
    // Set of statements
};
```
To call a function expression, you would call it similar to a function declaration, like this: `calNum()`.

<a name="chapter-3">Key Differences</a>
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:
```Javascript
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:
```Javascript
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:
```Javascript
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:
```Javascript
array.map(function count(A, B) {
    // Do something
}); // function named as count.
 
```
<a name="chapter-4">Conclusion</a>
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!