JavaScript Function Expressions
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;
};
Function Expressions
A function expression is a function stored in a variable.
After a function expression has been stored in a variable, the variable can be used as a function:
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);
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;};
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.
Quiz
Which type of function can be called before it is defined in the code?
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:
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.
Quiz
What is the difference between sayHello and sayHello()?
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.
