Javascript

What is the difference between Function Expression and Function Declaration?

First of all… What is the function? Functions are the basic building block of JavaScript. Functions allow us to encapsulate a block of code and...

Written by Luci · 2 min read >

First of all… What is the functionFunctions are the basic building block of JavaScript. Functions allow us to encapsulate a block of code and reuse it multiple times. Functions help us to make our code more readable, reusable, and organized.

As someone who has recently started exploring the world of programming, I stumbled upon one problem…I do not understand which way of writing a function is more efficient Function Expression OR Function Declaration? This article will help you learn the difference between these two.

Function Declaration

Function Declaration or a function statement declares a function with a function keyword. Another important thing, it must have a function name.

Below I will show you an example of Function Declaration:

//First we use the keyword "function"
//Then goes the name of function
//Next we have a list of parameters between the parenthesis 
//that are separated by the comma 
function greetSomeone(greeting, person){
//And finally the code of the function written between curly braces
    alert(greeting + ", " + person)
}
//to execute the code we need to invoke the function. We can do it by 
//calling it by its name.
greetSomeone("Good evening", "Mike")

As you can see the function “greetSomeone” is declared when a function is created. That means that the functions can be called before it is defined.

Here are some benefits of using function declaration over function expression:

  • it can make your code more readable. If you have a very long function, giving it a name will help you to keep a track of what’s going on.
  • or if you need to use a function before it is defined. Function declarations are hoisted so that means they are available for you before they are even defined.

Function Expression

It is a function that is created by assigning it to a variable. That means it has to be assigned before it is called. It is similar to a function declaration but without the function name (they are anonymous).
Let’s look at this example of function expression:

//we can store the function name in a variable assignment
let minus = function (a, b){
  return a - b;
};

Benefits of using Function Expressions:

  • these have more flexibilitySo if you wanna use the same function in different places, you can simply create function expressions and assign them to different variables.
  • function expressions are not hoisted, which means you can’t use them before they are defined in your code. That is very helpful when you want to make sure that a function is only used after it is defined.

So what to choose when writing a function… Declaration or Expression?

The answer depends on your needs. If you need a function that is not hoisted and is more flexible, then function expression would be your way to go. And if you need one that is more readable and understandable, then you should use function declaration.

Both of them have very similar syntax, the only obvious difference you can see is that function expressions are anonymous, while function declarations have a name.

So let me sup up all the information to show the difference between expression and declaration.

  1. Function declaration MUST have a function name, while function expression does not.
  2. Function declaration does not need to be stored in a variable. A function expression can be stored in a variable and once the function is defined with an expression, it is gonna be invoked.
  3. A function declaration is executed before any other code, while a function expression is executed when the engine reaches the line of code.
  4. Function declarations are hoisted and function expressions are not.
  5. Syntax for function declaration:
    function newName(){
    //body of the function
    }
    newName()
    Syntax
     for function expression:
    const newFunction = function(a, b) {
    //set of instructions
    }
Written by Luci
I am a multidisciplinary designer and developer with a main focus on Digital Design and Branding, located in Cluj Napoca, Romania. Profile