Function declaration vs expression

The difference between a function expression and a function declaration can be confusing.

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.

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, give it a value

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

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

Shorter way

Even Shorter way if you have one line

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

In reality, we do not name this function. We store it inside a variable so we can refer to this function 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 just a value.

Hoisting

Function declarations 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. Even if I call all my functions first and make function declarations later, my function declaration will go up in the priority tree behind the scenes. We will not see that process physically however that is what the visible result is.

Here is an example:

Read the code from top to bottom.
I am calling the function cookFunction but I haven’t even created it yet, didn't indicate what it is supposed to do.
You might think that I am trying to tell JavaScript that hey, do cookFunction right now but I didn't even explain what it’s supposed to do.

With hoisting, JavaScript secretly brings the function declaration to the top, saves it in the global scope and the code executes 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 is the environment that is accessible across applications, in short, it’s global.

As a result, whatever you save in the variable or whenever you declare a function, everything will be saved first, no matter the order.
Later, when the execution starts, JavaScript will know everything about all the existing variables and functions available globally.

If you want to explore this topic further, I recommend you to read my post about Hoisting.

Function expressions 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 save this function inside the variable where the function is a value.

During hoisting, the value is not hoisted however the variable where we save this function will be hoisted anyway. It 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.

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 to use the function once, a function expression is a good choice. Instead of forcing JavaScript to remember so many functions, variables and save everything in the global scope, you simply use the function expression.
If you 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 in the entire application.

There is much more to explore about the hoisting and global state however understanding the difference between function expressions and function declarations is a good start if you are beginner JavaScript developer.