Function Declarations & Function Expressions
Tags: functions, javascript, beginners, frontend
Published: 2023-01-18 19:18:46

While learning JavaScript you might have noticed that you often hear words like function expression and function declaration. They do sound kind of the same and as a beginner, you might not pay much attention. 

Let’s try to break down the differences between a function expression and a function declaration.

## Name

If you create a function that has a name it’s function declaration. So you declared a function with a name. Here is the process:

- We declare a function with a Function constructor and give it a name

**function someName() {}** - We declared a function

- We define the function declaration, e.g. give it a value

**function someName() { // create definition here - whatever happens }** 


![function declaration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcafaniqbrqqw5aguhch.png)



If you create a function with no name, it becomes a function expression in this case. 



![function expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjk9j9xevqbqvfp664ez.png)

**Shorter way**

![function expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goksa5v1vqun5wxu2b79.png)


**Even Shorter way if you have one line**


![function expression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dttz1ljazcse02xlhel.png)


It might look confusing when I save the **cookFunction** function in a constant and looks like I gave a name to the function.

But what we are doing we do not name this function. We are simply storing it inside a variable so we can refer to this function sometime later.
I might want to use this function somewhere later but if I cannot refer to it somehow, I will not be able to call this function, makes sense? The function expression we are saving in the variable is actually just a value but we will discuss this very soon.

## Hoisting

When it comes to function declaration, they are hoisted. When you declare a function and create variables in JavaScript, they are the top priority among all other things no matter the order. So even if I call all my functions and make function declarations later, my function declaration will secretly go up in the priority tree and we will see that not physically when we write the code but during the result we see. 

Here is an example


![function declaration hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n425u7zildbkui7jwzke.png)

Read the code from top to bottom.
I am calling the function **cookFunction** but I didn’t explain yet what it does and then I explained what this function should do.
So you will think that I am trying to tell JavaScript that hey, do **cookFunction** right now but it wasn’t even explained yet what it’s supposed to do.

With hoisting, JavaScript secretly will bring the function declaration to the top, save it in the global scope and the code will be executed in reversed order.
So the function declaration will happen first and only then will the function be called, even though it is written vice versa.

**The global scope means the environment which is available to any code in the application, it’s global.**

Shortly, whatever you save in the variable or whenever you declare a function, it will be saved first, no matter the order. And whenever the execution starts there will already be knowledge of existing variables and functions.


Function expressions however are not hoisted. The reason is very simple. When we use function expression we do not declare any variable or expression with this function, we just save this function inside the variable so the function is just a value.

During hoisting, the value is not hoisted however the variable where we save this function will be hoisted anyway. It just won't have the function value just yet.

That’s why we will see an error if we call the function by writing only the variable name where we saved the value first. The JavaScript will hoist the const **cookFunction** variable but not the value inside it.


![function expression hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nx923zy3amyszkb7cge.png)


## Which one should I use? 

Another important difference we need to be aware of is the usage of the functions.
How, when, and where do we decide that we need a function expression or a function declaration? Which one is better, faster, or more modern? 

If you need the functions just once and it’s enough for you that it invokes once and we can forget about it, a function expression is a good choice. Instead of forcing JavaScript to remember so many functions and variables and save everything in the global scope, you simply make the function expression. 
However, if you will need to use the function in many places and its logic is connected to another logic, then you need to use a function declaration so it’s saved in the global scope and accessible to everyone.

There are several other cases where we choose function expressions over function declarations which will be covered in the next post.

There is much more to know about the hoisting and global state which is also very very important however make sure to understand what is the difference between function expressions and function declarations.