Function Expressions

This lesson explains Function Expressions in JavaScript with beginner-friendly examples, practical use cases, and clear best practices.

JavaScript Function Expressions Overview

A JavaScript function expression is a function that is assigned to a variable. Unlike a function declaration, a function expression is created when the assignment statement executes. Function expressions are widely used for callbacks, event handlers, closures, module patterns, and modern JavaScript development.

Function expressions can be named or anonymous. They provide flexibility and are commonly used with array methods, asynchronous programming, and JavaScript frameworks such as React, Angular, Vue, and Node.js.

Concept	Description	Common Usage
Function Expression	Function assigned to a variable.	Reusable logic.
Anonymous Function	Function without a name.	Callbacks.
Named Function Expression	Function with an internal name.	Debugging and recursion.
First-Class Function	Functions stored, passed, and returned.	Functional programming.

JavaScript Function Expression Example

// Anonymous Function Expression

const greet = function(name) {
  return "Hello " + name;
};

console.log(greet("John"));

// Named Function Expression

const square = function calculateSquare(number) {
  return number * number;
};

console.log(square(5));

In this example, functions are assigned to variables. The function can be called using the variable name, making the code reusable and modular.

Top 10 JavaScript Function Expression Examples

The following examples demonstrate common real-world uses of JavaScript function expressions. These patterns are frequently used in modern web development, including event handling, callbacks, array methods, form validation, and reusable utility functions.

#	Example	Syntax
1	Greeting Function	`const greet = function(name) { return "Hello " + name; };`
2	Add Two Numbers	`const add = function(a, b) { return a + b; };`
3	Multiply Numbers	`const multiply = function(a, b) { return a * b; };`
4	Check Even Number	`const isEven = function(num) { return num % 2 === 0; };`
5	Calculate Discount	`const discount = function(price) { return price * 0.9; };`
6	Button Click Handler	`button.onclick = function() { console.log("Clicked"); };`
7	Array Sort Callback	`numbers.sort(function(a, b) { return a - b; });`
8	Array Filter Callback	`numbers.filter(function(n) { return n > 10; });`
9	Form Validation	`const validate = function(value) { return value !== ""; };`
10	API Data Formatter	`const formatUser = function(user) { return user.name; };`

Best Practices

Use function expressions when assigning functions to variables.
Use descriptive variable names.
Keep each function focused on one responsibility.
Prefer const for storing function expressions.
Return values instead of modifying global variables.
Use named function expressions when debugging complex logic.
Use arrow functions for short callback functions.
Document reusable functions with comments or JSDoc.

Common Mistakes

Calling a function expression before it is defined.
Confusing function expressions with function declarations.
Using unclear variable names.
Creating large functions that perform multiple tasks.
Forgetting to return a value.
Using var instead of const.
Overusing anonymous functions in large projects.

Key Takeaways

Function expressions store functions inside variables.
They are created when the assignment executes.
Anonymous and named function expressions are both supported.
Function expressions are commonly used for callbacks and event handlers.
Use const for modern JavaScript function expressions.
Small reusable functions improve code quality and maintainability.

Pro Tip

Use function expressions whenever a function needs to be passed as an argument, stored in a variable, or used as a callback. They are one of the foundations of modern JavaScript programming.