Function Expression and Function Declaration

3 min readJan 22, 2021

When we want to define a function in JavaScript during the day, we can use more than one method. You probably know how they are.

function func(){}const func = () => {}

Although we use these often, we may not know and be curious about their differences, advantages and disadvantages. The main issues I will mention in this article are;

Hoisting
Anonymous Functions — Named Functions
IIFE
Garbage Collection

Before touching these issues, let’s look at what is expression and declaration.

Expression:

An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value.

So we can say var x = 10 is an expression.

Declaration:

An example of this, var x; is a declaration. Because we do not assign a value to this variable and we just indicating the existence of this variable. It doesn’t hold any value right now.

After these examples, I think the function expression and function declaration syntax will be more memorable.

Hoisting

One of the biggest differences between these two definitions is hoisting. If it is a declaration, it will be moved “to the top” of your code by interpreter and will remain there throughout the entire program. Therefore, as soon as your program starts, even if you write the funcDeclaration function at the bottom of the file, you will still be able to use it even at the top line. But if it’s an expression, you won’t know if it’s a function or not until you get to the line where you write the funcExpression function.

Anonymous Function and Named Function

An anonymous function is a function that was declared without any named identifier to refer to it. The biggest advantage of named functions over anonymous functions is that they are easy to debug. If you use a named function, the console will show you in which function the error occurred, but if you have more than one anonymous function, it will be a little more difficult.

IIFE

IIFE stands for Immediately Invoked Function Expression. The anonymous function we see above is actually an IIFE. As the name suggests, it is a function that we define and invoke at the same time. “This is an anonymous function and we do not assign it to a variable. Why do we call it IIFE instead of IIFD?” you can say. That’s why we enclose this function with parentheses so that it can act as a variable. This function that we put between the two brackets will behave like a variable and it will became a function expression

Garbage Collection

Basic definition of GC is;

JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore.

If you use IIFE, that function and its variables will be collected by GC. This way you can prevent your global scope from getting too dirty.

Conclusion

Briefly, I tried to mention the differences between function expression and function declaration. You can choose either one according to your usage area. Although we use less of the function declaration when using our frameworks that take over the Front-End world, it is important to know what they are :)