Function Declaration VS Function Expression In JavaScript

Basically, function declaration and function expression are two ways of creating a function in JavaScript. But how do they differ? And how do you know which of them to use when creating functions?

Function Declaration

Here, the function is defined starting with the function keyword then a name followed by parentheses and then curly braces where your statements will be written.

//Example of Function declaration 
function calcAge(birthYear) {
    return 2021 - birthYear;
}

Function Expression

Unlike function declaration, function expression does not have a name, this is usually called an anonymous function. The value of the function cannot be used until it is stored in a variable.

//Example of Function expression
const calcAge = function(birthYear) {
    return 2021 -birthYear;
}

What is the difference between the two?

The main practical difference is that you can call function declaration before you define it and your code will work just fine but with function expression, it's impossible and JavaScript will throw an error at you.

//Calling Functiion declaration before defining it

calcAge(2000);

function calcAge(birthYear) {
    return 2021 - birthYear;
}

I tried doing the same above with Function expression and I got this error in return:

Uncaught ReferenceError: Cannot access 'calcAge' before initialization

This happens because of a process called "Hoisting". Hoisting is a JavaScript behaviour which moves all the declarations to the top of your code before execution.
Function declarations are hoisted but function expressions are not. This is why calling a function before defining it is possible with function declaration.

Which of them should you use when writing your functions?

Most of the time, it is just a matter of preference. Personally, I prefer to use function expression as it forces me to define all my functions at the top of my code. I get to write cleaner and more readable codes this way..

Comments

[Jon Randy 🎖️]

Also, a function expression does not have to be stored in a variable to be used, you can invoke it immediately. This is known as an 'immediately invoked function expression' or IIFE

(function (name) { console.log('Hello '  + name) })('World')

[Jon Randy 🎖️]

Function expressions can indeed use a function name - and it can be a good idea to do so - the names will show up in debug traces and can make following the trace much easier. This is perfectly valid:

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

The resulting function will be callable with myFunc() and will have the name doStuff in debug/stack traces

[Marc Ziel]

A function expression can have a name but it's not required. When it has a name you can use it in the function body (handy for recursion).

Also, when you create function expressions with const or let they're hoisted but they aren't initialized as the error says.