JavaScript Function Expressions
What is a Function Expression?
A function expression is a function assigned to a variable.
A function expression is a way of defining a function within an expression, rather than as a standalone declaration.
A function expression can be assigned to a variable, passed as an argument to another function, or returned from a function.
After a function expression has been stored in a variable, the variable can be used as a function:
The function above is actually an anonymous function (a function without a name).
Functions stored in variables do not need function names. They are always invoked (called) using the variable name.
Note
The functions above end with a semicolon because they are a part of an executable statement.
Later in this Tutorial
Function expressions offer high flexibility and are widely used in JavaScript for various purposes, and you will see a lot more of function expressions in the following chapters:
Callbacks:
Passing functions as arguments to other functions, such as event listeners or asynchronous operations.Closures:
Function expressions help create closures, which allow functions to remember and access variables from their containing scope.Arrow Functions:
The concise arrow function syntax (=>) is a modern way of writing function expressions.Immediately Invoked Function Expressions (IIFEs):
Functions that run as soon as they are defined, often used to create private scopes and avoid global variable conflicts.
Function vs. Function Expression
In JavaScript, function and function expression refer to different ways of defining functions, their different syntax and how they are handled.
Function Declarations
A function declaration (or simply a function) is defined using the function keyword followed by a function name, parameters, and a code block:
function add(a, b) {return a + b;}
Function declarations are "hoisted" to the top of their scope. This means you can call a function before it is defined in the code:
let sum = add(2, 3);
function add(a, b) {return a + b;}
Note
Semicolons are used to separate executable JavaScript statements.
Since a function declaration is not an executable statement, it is not common to end it with a semicolon.
Function Expressions
A function expression is defined by assigning an anonymous function to a variable:
const add = function(a, b) {return a + b;};
Note
Function expressions are commonly used to create anonymous functions.
Anonymous functions are functions without a name.
A function expressions can also be a named function assigned to a variable:
const add = function add(a, b) {return a + b;};
Function expressions are not hoisted in the same way as function declarations. They are created when the execution reaches their definition, and cannot be called before that point:
let sum = add(2, 3); // ⛔ Will generate error.
const add = function (a, b) {return a + b;};
Key Differences
- Syndax: Function declarations require a name. Function expressions can be anonymous.
- Hoisting: Function declarations are hoisted. Function expressions are not.
- Flexibility: Function declarations offer more flexibility in how and where they are used.
| Function Declaration | Function Expression |
|---|---|
| Syntax: A statement starting with the function keyword, followed by a required name. | Syntax: A part of an expression or assignment, and can be anonymous (without a name). |
| Hoisting: The function is moved to the top of its scope before code execution, allowing you to call it from anywhere within that code scope, even before its definition. | Hoisting: The variable holding the function might be hoisted (depending on var, let, or const), but the function assignment itself is not. You can only call it after it has been defined in the code scope. |
| Flexibility: Primarily used for general-purpose functions that need to be available globally or in a specific scope. | Flexibility: Can be used in various contexts, such as arguments to other functions (callbacks), immediately invoked function expressions, and assigned to object properties. |
