What is a Function Expression?
A function expression is a function stored in a variable.
// Standard Function
function multiply(a, b) {
return a * b;
}
// Function Expression
const multiply = function(a, b) {
return a * b;
};
Example
const multiply = function (a, b) {return a * b};
After a function expression has been stored in a variable, the variable can be used as a function:
Example
let z = multiply(4, 3);
Anonymous Functions
Function expressions are commonly used to create anonymous functions.
The function above is actually function without a name.
Functions stored in variables do not need names.
The variable name is used to call the function.
Note: But, function expressions can also be a named: const add = function add(a, b) {return a + b;};
Function Expressions Use Semicolons
A function expression is a JavaScript statement.
That is why it usually ends with a semicolon.
Example
const add = function(a, b) {
return a + b;
};
Functions Stored in Variables
Because a function expression is stored in a variable, it can be used like a value. This is useful when passing functions to other functions (callbacks).
A function expression can be assigned to a variable, passed as an argument to another function, or returned from a function.
Example
function run(fn) {
return fn();
}
const sayHello = function() {
return "Hello";
};
run(sayHello);
Note: Functions vs. Function Expressions JavaScript functions are defined with the function keyword. JavaScript functions can be defined in different ways. In JavaScript, function declarations and function expression refer to different ways of defining functions, their different syntax and how they are handled: They both work the same when you call them. The difference is when they become available in your code.
Function Declarations vs Function Expression
A function declaration (or simply a function) is defined using:
- The function keyword
- A function name
- Parameters in parentheses
- A code block brackets
function add(a, b) {return a + b;}
A function expression is defined using:
- The function keyword
- Parameters in parentheses
- A code block brackets
const add = function(a, b) {return a + b;};
Example
const sayHello = function() {
return "Hello World";
};
sayHello();
Note: The function above is stored in the variable sayHello. To run it, you call sayHello().
Hoisting
Function declarations can be called before they are defined.
Function expressions can not be called before they are defined.
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); // Will work
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
- Syntax: 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.
When to Use Each
- Use function declarations for general-purpose functions
- Use function expressions when assigning functions to variables
- Use function expressions in callbacks and event handlers
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:
- Arrow Functions The concise arrow function syntax (=>) is a modern way of writing function expressions.
- 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.
- Immediately Invoked Function Expressions (IIFEs) Functions Expressions that run as soon as they are defined, are often used to create private scopes and avoid global variable conflicts.
Common Mistakes
- Forgetting the Semicolon Function expressions are statement and should end with ; (semicolon).
- Expecting Hoisting Arrow functions are not hoisted. You cannot call a function expression before it is defined.
- Confusing Reference and Call sayHello is the function. sayHello() calls the function.
- Confusing Function Names and Variables In expressions, the variable name is the function reference.
Note: Next Chapter JavaScript Arrow Functions Arrow Functions is a short syntax for function expressions You can skip the function keyword You can skip the return keyword You can skip the curly brackets
