Function Declaration vs Function Expression in JavaScript

Function declarations and function expressions are two ways to define functions in JavaScript. They are similar in that both can be used to define functions that can accept inputs and return outputs. However, there are important differences in how they are processed and when they can be used.

Function Declaration

A function declaration defines a named function. Function declarations are processed before any code is executed, during the “creation” phase of the execution context, a process known as hoisting. Because of this, a function defined by a function declaration can be called anywhere in your code, even before the function declaration itself.

Example of a function declaration:

1
2
3
4
5
function greet() {
    console.log('Hello, World!');
}

greet(); // Outputs: Hello, World!

You can also call the function before the function declaration, thanks to hoisting:

1
2
3
4
5
greet(); // Outputs: Hello, World!

function greet() {
    console.log('Hello, World!');
}

Function Expression

A function expression defines a function as part of a larger expression syntax (usually a variable assignment ). Functions defined by function expressions aren’t hoisted, which means they can’t be called before they are defined.

Example of a function expression:

1
2
3
4
5
let greet = function() {
    console.log('Hello, World!');
}

greet(); // Outputs: Hello, World!

If you try to call it before it’s defined, you’ll get an error:

1
2
3
4
5
greet(); // TypeError: greet is not a function

let greet = function() {
    console.log('Hello, World!');
}

Similarities:

Both can be used to define functions that can accept arguments and return values.
Both can be anonymous or named.
The body of both function declarations and function expressions can include as many statements as needed, defined within the function’s {} braces.

Differences:

Hoisting: Function declarations are hoisted, so they can be called before they’re defined. Function expressions are not hoisted, so they can’t be called before they’re defined.
Syntax: Function declarations start with the function keyword, followed by the function name. Function expressions are typically defined as part of a variable assignment and may or may not have a name.
Use in Code: Function expressions are typically used when a function needs to be passed as an argument to another function, or assigned to a variable. Function declarations are typically used when a function needs to be usable throughout a script, or when a function should be available in the scope in which it’s defined.

These are the general rules, but there are exceptions. For instance, function expressions that are defined using the function keyword will be hoisted if they’re defined in the global scope (but not if they’re defined inside a function). Additionally, JavaScript ES6 introduced new ways to define functions (like arrow functions) that have their own rules and idiosyncrasies.