Function Declarations & Function Expressions

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 }

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

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.

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

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.

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.

Comments

[Jon Randy 🎖️]

Unfortunately, your 'anonymous' function examples are not anonymous - the act of assigning an anonymous function (returned by a function expression) to a variable does actually give it a name - making it cease to be anonymous. So, stating that:

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

Is not correct at all, since your function now has the name cookFunction. We can check if a function is anonymous or not by checking its name property:

(function () { console.log('hello') }).name   // undefined

const myFunc = function () { console.log('hello') }
myFunc.name   // 'myFunc'

It's also possible to name functions that are defined in function expressions:

(function myFunc2() { console.log('hello') }).name   // myFunc2

const myFunction = function functionByMe() { console.log('hello') }
myFunction.name   // 'functionByMe'

[Ekaterine Mitagvaria]

Thank you so much for the correction and notes with examples 🙌🏻

[Jon Randy 🎖️]

It's also important to note that creating a named function in a function expression will not result in the function being declared, so this:

If you create a function that has a name it’s function declaration. So you declared a function with a name.

Unfortunately, is also wrong.

// This will define a named function 'myFunc' and it will be available everywhere in the current scope
function myfunc() { console.log('hello') }

// Whereas this function expression will still create a function named 'myFunc', but will not store it anywhere
( function myFunc() { console.log('hello') } )

[Ekaterine Mitagvaria]

I did not get what you mean, I was not discussing scope here but the name

[Jon Randy 🎖️]

Your examples of 'function expressions' are actually examples of assigning function expressions to variables. The function expression is just the 'value' part you are assigning.

Also function declarations will make the function available everywhere in the current scope, not the global scope.

[Ekaterine Mitagvaria]

I have actually mentioned that already in this post that I am saving them in the variable and this function is a value. So I am not sure why you are repeating the same I have written. The reason I am doing this is because saving it in the variable or just naming it sounds and looks very similar.