JavaScript functions are not only blocks of code designed to perform a particular task; they are also values that can be assigned to variables or passed around as arguments. This introduces us to the concept of function expressions.
A function expression involves defining a function within the context of an expression, typically by assigning it to a variable. This allows the function to be stored and accessed just like any other value.
const sum = function total(x, y) {
return x + y;
};In the example above, the function is named total, but when we assign it to the variable sum, we must use sum to call the function. The original name total is not accessible outside of the function’s own body.
More commonly, function expressions are used without naming the function—these are called anonymous functions. They are particularly useful when a function is used only once or in a limited scope.
const sum = function (x, y) {
return x + y;
};Anonymous functions do not have a name associated with them, which means they cannot refer to themselves by name—something that could be necessary for recursion or event handlers that need to unbind themselves.
Anonymous functions are extensively used as arguments to other functions or methods, especially those that require a callback function. A classic example is using an anonymous function with array methods.
const numbers = [1, 2, 3, 4, 5, 6, 7];
const evens = numbers.filter(function (x) {
return x % 2 === 0;
});
console.log(evens); // Outputs: [2, 4, 6]Here, the anonymous function is used to specify the condition for filtering elements of an array. This pattern is common in JavaScript for encapsulating small units of behavior without cluttering the namespace with function names that are unnecessary beyond their immediate use.
Function expressions, either named or anonymous, are common when working with frameworks or libraries that utilize functional programming paradigms.