JavaScript function expression


A function expression in JavaScript is a way to define a function as part of an expression. Unlike function declarations, function expressions do not have their own name (they can be anonymous) and are not hoisted. This means you must define them before you use them. Function expressions can be assigned to variables, passed as arguments to other functions, and used as immediate function invocations.

Syntax

The basic syntax of a function expression is:

const functionName = function(parameters) { // Code to be executed };

Key Characteristics

  1. Anonymous Function Expressions

    • A function expression can be anonymous, meaning it does not have a name.
    • Example:
      const add = function(a, b) { return a + b; }; console.log(add(2, 3)); // 5
  2. Named Function Expressions

    • A function expression can also be named, which is useful for debugging.
    • Example:
      const subtract = function subtractNumbers(a, b) { return a - b; }; console.log(subtract(5, 3)); // 2
  3. IIFE (Immediately Invoked Function Expression)

    • Function expressions can be immediately invoked after they are defined.
    • Example:
      (function() { console.log('This function runs immediately!'); })(); // 'This function runs immediately!'
  4. Returning a Function from Another Function

    • Functions created by function expressions can be returned from other functions.
    • Example:
      function createMultiplier(multiplier) { return function(value) { return value * multiplier; }; } const double = createMultiplier(2); console.log(double(5)); // 10
  5. Function Expressions and Callbacks

    • Function expressions are often used as callbacks in asynchronous operations or array methods.
    • Example:
      const numbers = [1, 2, 3, 4]; const doubled = numbers.map(function(num) { return num * 2; }); console.log(doubled); // [2, 4, 6, 8]

Hoisting

Unlike function declarations, function expressions are not hoisted. This means you cannot call a function expression before it is defined in the code.

console.log(multiply(2, 3)); // Error: multiply is not defined const multiply = function(a, b) { return a * b; };

In this example, trying to call multiply before it is defined will result in an error.

Scope

Function expressions are subject to the scope of the variable they are assigned to. If the function expression is assigned to a variable declared with let or const, it is block-scoped.

{ const greet = function(name) { return `Hello, ${name}!`; }; console.log(greet('Alice')); // 'Hello, Alice!' } console.log(greet('Bob')); // Error: greet is not defined

Key Points

  • Not Hoisted: Function expressions are not hoisted, so they must be defined before they are used.
  • Anonymous or Named: Function expressions can be either anonymous or named.
  • Flexible Use: They are flexible and can be used as arguments, return values, or immediately invoked.

Function expressions provide a powerful way to create functions dynamically and are essential for handling asynchronous operations, callbacks, and more advanced JavaScript patterns.