Function Expressions vs. Function Declarations in JavaScript — What’s the Difference?

Learn about the difference between function declarations and function expressions in JavaScript.

This is a function expression:

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

This is a function declaration:

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

Function expressions and declarations pretty much do the same thing. In both examples above, you would call them like this executeMe() and then they execute whatever code is inside their code block {..}.

But there is a difference, not in what they do, but how they are executed — or rather, the order they are read and executed in — and this matters.

This function will run fine:

// Call function declaration
executeMe()

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

However, function will not run fine (it will throw an error):

// Call function
executeMe()

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

To understand why the first example (function declaration) works, but the second example (function expression) doesn’t, you have to learn what hoisting is in JavaScript, and then it will start making sense.

Hoisting

In JavaScript, code is executed from top to bottom. Normally, you can only use a variable after its declaration in your script file (order-wise), however, function declarations are hoisted to the top by the web browser, before any code is executed.

Hoisting means that your browser’s code interpreter always knows about (has read) your function declarations before they are called (told to execute).

So you can call and execute your function declaration from anywhere in your JavaScript file, even before the function declaration physically exists in your script file, order-wise. This makes function declarations unique.

Function declarations

Before any code is can run, your browser loads (reads) your entire JS script file, and since function declarations are moved to the top (hoisted) of the execution order, your code is actually executed in this order by the interpreter:

// 1. Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

// 2. Call to function declaration
executeMe()

Even if your code is physically written in your script file in the opposite order:

// Call to function declaration
executeMe()

// Function declaration
function excuteMe() {
    console.log('Function Declaration')
}

That’s why it doesn’t matter if you physically place the call to your function declaration before or after it is defined in your script file. Both approaches will work because JavaScript always loads function declarations before it runs function calls to those function declarations.

Function Expressions don’t hoist

Function expressions are not hoisted (not read first). Function expressions are only read when the interpreter reaches that line of code in your script file. So if your function expression physically exists after your function call (order-wise) then the JavaScript interpreter that runs in your browser can’t execute it.

So this won’t work:

// Call function expression
executeMe()

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

The code above will give you an error because you’re trying to run a function (executeMe()) before your browser’s code interpreter even knows (has read) about your function expression’s existence.

Swap the code order and it will work:

// Function expression
let excuteMe = function () {
    console.log('Function Expression')
}

// Call function expression
executeMe()

The code above works because of the code order. Your browser will first read the line (top to bottom) with your variable let executeMe that contains your function expression — and then it’s asked to execute it afterward with executeMe().

Which one should you use?

What’s important is not whether you use function declarations or function expressions. Neither is going to make or break your career. Being consistent is way more important. Pick a style, and stick with it, at least within the same project.

Even more importantly, if you join a team that uses function expressions, well, then you should follow their recipe to keep the codebase consistent, no matter what your personal preference is.

One good case for using function expressions is that they force you into using a stricter code structure, which makes your code more predictable. Function declarations, are forgiving because you can call them from anywhere in your script, and thus that can lead to inconsistent code structure, especially if multiple developers are working on the same project.

A good case (debatable) for using function declarations is if you have some functions that call other functions, but you’re confused about the and for some reason can’t make your function expressions execute because of some order confusion