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; };

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.

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);

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

Example

function add(a, b) {return a + b;}

A function expression is defined using:

• The function keyword
• Parameters in parentheses
• A code block brackets

Example

const add = function(a, b) {return a + b;};

Example

const sayHello = function() {

  return "Hello World";

};

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:

Example

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:

Example

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 FunctionsThe 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.
• ClosuresFunction 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.