JavaScript Function Expression (original) (raw)

Last Updated : 16 Dec, 2024

A **function expression is a way to define a function as part of an expression making it versatile for assigning to variables, passing as arguments, or invoking immediately.

• Function expressions can be **named or **anonymous.
• They are **not **hoisted, meaning they are accessible only after their definition.
• Frequently used in **callbacks, **closures, and dynamic function creation.
• Enable **encapsulation of functionality within a limited scope. JavaScript ``

const greet = function(name) { return Hello, ${name}!; }; console.log(greet("Ananya"));

``

**In this code

• The function(name) creates an anonymous function assigned to the greet variable.
• The function takes name as a parameter and returns a greeting string.
• Calling greet(“Ananya”) invokes the function and outputs the greeting.

**Syntax

const fName = function(params) { // function body };

• **fName: Variable storing the function.
• **function(params): Defines the function. Parameters are optional.
• ****{ // function body }:** Contains the logic to execute when the function is called.

Named vs Anonymous Function Expressions

**Anonymous Function Expression: The function has no name and is typically assigned to a variable.

JavaScript `

const sum = function(a, b) { return a + b; }; console.log(sum(5, 3));

`

**Named Function Expression: The function is given a name, which is useful for recursion or debugging.

JavaScript `

const factorial = function fact(n) { if (n === 0) return 1; return n * fact(n - 1); }; console.log(factorial(5));

`

Use Cases of Function Expressions

1. Storing in Variables

Function expressions are often assigned to variables for easy reuse.

JavaScript `

const add = function(x, y) { return x + y; }; console.log(add(3, 5));

`

2. Callback Functions

They are commonly used as arguments in higher-order functions.

JavaScript `

setTimeout(function() { console.log("This message appears after 3 seconds!"); }, 3000);

`

**Output

This message appears after 3 seconds!

3. Event Handlers

Function expressions are ideal for event listeners.

JavaScript `

document.querySelector("button").addEventListener("click", function() { console.log("Button clicked!"); });

`

4. Self-Invoking Functions

Function expressions can be immediately executed.

JavaScript `

(function() { console.log("This is a self-invoking function!"); })();

`

Output

This is a self-invoking function!

Advantages of Function Expressions

• **Flexibility: Can be used as callbacks, event handlers, or part of expressions.
• **Encapsulation: Keeps the scope limited and avoids polluting the global namespace.
• **Control Over Execution: Executes only when explicitly invoked.

Arrow Functions: A Variant of Function Expressions

Arrow functions are a concise and modern way to define function expressions. They are particularly useful for short, single-purpose functions.

JavaScript `

const arrowFunc = (param1, param2) => param1 + param2; console.log(arrowFunc(5, 7));

`

**Key Features:

• Implicit return for single-line functions.
• No binding of this, making them unsuitable for methods requiring a this context.

Function Expression vs Declaration