Loading lesson path
Concept visual
Start at both ends
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;
};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:
let z = multiply(4, 3);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. But, function expressions can also be a named:
const add = function add(a, b) {return a + b;};A function expression is a JavaScript statement. That is why it usually ends with a semicolon.
const add = function(a, b) {
return a + b;
};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.
(or simply a function) is defined using:
A code block brackets function add(a, b) {return a + b;}A function expression is defined using:
A code block brackets const add = function(a, b) {return a + b;};const sayHello = function() {
return "Hello World";
};
sayHello();The function above is stored in the variable sayHello. To run it, you call sayHello().
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;};Function declarations require a name. Function expressions can be anonymous.
Function declarations are hoisted. Function expressions are not.
Function declarations offer more flexibility in how and where they are used. Which type of function can be called before it is defined in the code?
Use function expressions when assigning functions to variables Use function expressions in callbacks and event handlers
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: