Functions as Values
Function expressions assign a function to a variable.
They are not hoisted like declarations, so you must define them before use.
JavaScript Tutorial
JavaScript Function Expression
A function expression assigns a function to a variable.
Unlike declarations, expressions are not hoisted with their bodies.
Why We Need It
Function expressions give you flexibility to pass functions around and assign them conditionally.
They are especially common in callbacks and higher-order patterns.
Syntax
const name = function(params) { ... };Basic Example
1. Basic expression
const greet = function(name) {
return "Hello " + name;
};
console.log(greet("Sam"));Assign a function to a variable.
Real World Example
2. Named expression
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};
console.log(factorial(4));Named expressions help recursion and debugging.
Multiple Use Cases
Anonymous vs Named
Expressions can be anonymous or named for better stack traces.
Named expressions help debugging without adding a new variable.
Use Cases
Use function expressions for callbacks, configuration, and conditional assignments.
They are common in event handlers and functional patterns.
More Examples
3. Conditional assignment
const mode = "compact";
const formatter = mode === "compact"
? function(value) { return value.toFixed(0); }
: function(value) { return value.toFixed(2); };
console.log(formatter(12.345));Assign different functions based on conditions.
4. Callback usage
const nums = [1, 2, 3];
const doubled = nums.map(function(n) {
return n * 2;
});
console.log(doubled);Function expressions are common in callbacks.
Comparison
Without
function add(a, b) {
return a + b;
}With
const add = function(a, b) {
return a + b;
};Common Mistakes and Fixes
Calling before definition
Function expressions are not hoisted like declarations.
Overusing anonymous functions
Name functions for better debugging when appropriate.
Mixing styles in one file
Pick a consistent style for readability.
Interview Questions
What is the main difference from declarations?
Function expressions are not hoisted with their bodies.
Why use named function expressions?
They improve stack traces and allow recursion.
When are expressions useful?
For callbacks, event handlers, and conditional assignments.
Practice Problem
Practice: Create a function expression that returns the square of a number.
// TODO: const square = function(n) { ... }
One Possible Solution
const square = function(n) {
return n * n;
};
console.log(square(6));Frequently Asked Questions
Are function expressions hoisted?
The variable is hoisted, but the function value is not.
Why use function expressions?
They are flexible and work well for callbacks and conditional assignments.
Can expressions be named?
Yes, named expressions help debugging and recursion.
Try It Yourself
Try calling the function after definition with different inputs.