JavaScript Function Expressions
What is a Function Expression?
JavaScript functions are defined with the function keyword.
A JavaScript function can be defined as an function expression.
A function expression is a function stored in a variable.
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
The function above is actually an anonymous function (a function without a name).
Functions stored in variables do not need function names.
The variable name is used to call the function.
A function expressions can also be a named function assigned to a variable:
const add = function add(a, b) {return a + b;};
Note
Function expressions are commonly used to create anonymous functions.
Note
The function above is stored in the variable sayHello.
To run it, you call sayHello().
Function Expressions Use Semicolons
A function expression normally a 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
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;}
Function Expressions
A function expression is defined using:
- The function keyword
- Parameters in parentheses
- A code block brackets
const add = function(a, b) {return a + b;};
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 not generate error.
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.
| 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. |
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 part of a statement and usually end with ;.Calling Too Early
You cannot call a function expression before it is defined.Confusing Reference and Call
sayHello is the function. sayHello() calls the function.
