DEV Community

Cover image for Function declaration vs expression
Ekaterine Mitagvaria
Ekaterine Mitagvaria

Posted on • Updated on

Function declaration vs expression

#functions #javascript #beginners #frontend

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 }

function declaration

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

function expression

Shorter way

function expression

Even Shorter way if you have one line

function expression

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:

function declaration hoisting

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.

function expression hoisting

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.

Top comments (6)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

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'
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
catherineisonline profile image
Ekaterine Mitagvaria •

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

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

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') } )
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
catherineisonline profile image
Ekaterine Mitagvaria •

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

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

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.

Collapse
 
catherineisonline profile image
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.

Read next

__1e1adccb8 profile image

Organizing Fullstack Applications with Frontend Business Logic

Alexander Voronkov -

ebraim_sambo profile image

Pare de fazer comparações patéticas

Ebraim Sambo -

abhishekjaiswal_4896 profile image

Introduction to WebRTC

Abhishek Jaiswal -

respect17 profile image

AI Tools That Can Make Your Life as a Web Developer SO Much Easier 😊!

Kudzai Murimi -