JavaScript Functions
JavaScript Function Expressions
A JavaScript function expression stores a function inside a variable.
The function is written on the right of an equals sign, and the variable name is used to call it.
Unlike a declaration, a function expression cannot be called before the line that creates it.
Example
Example
javascript
const double = function (number) {
return number * 2;
};
console.log(double(8));In this example, the function has no name of its own.
It is called through the variable double.
What is a Function Expression?
A function expression is a function used as a value.
Because it is a value, it can be stored in a variable, passed to another function, or returned from one.
A function with no name is called an anonymous function.
Syntax
Syntax
javascript
const name = function (parameters) {
// code to run
};A semicolon is needed at the end, because this is a variable assignment.
Expressions are Not Hoisted
You cannot call a function expression before the line that defines it.
The variable exists, but it does not hold the function yet.
Example
Example
javascript
const triple = function (n) {
return n * 3;
};
console.log(triple(4));Calling triple(4) above the definition would cause an error.
This is the main practical difference from a function declaration.
Named Function Expressions
You can give the function its own name, which helps when reading error messages.
Example
Example
javascript
const factorial = function fact(n) {
if (n <= 1) return 1;
return n * fact(n - 1);
};
console.log(factorial(5));The inner name fact is only visible inside the function itself.
Passing a Function as a Value
Because a function expression is a value, it can be handed to another function.
Example
Example
javascript
const numbers = [1, 2, 3];
const doubleIt = function (n) {
return n * 2;
};
console.log(numbers.map(doubleIt));Here, the function is passed to map without being called first.
Storing Functions in an Object
Function expressions are often used as the values of object properties.
Example
Example
javascript
const calculator = {
add: function (a, b) {
return a + b;
}
};
console.log(calculator.add(2, 3));Here, add is a method of the object.
Declaration or Expression?
Use a declaration for a normal named function you call by name.
Use an expression when the function is a value: passed in, returned, or stored on an object.
Example
Example
javascript
function declared() {
return "declaration";
}
const expressed = function () {
return "expression";
};
console.log(declared() + " and " + expressed());Both do the same job here; the difference is hoisting and intent.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Expressions</title>
</head>
<body>
<h1>JavaScript Function Expressions</h1>
<p id="result"></p>
<script>
const double = function (number) {
return number * 2;
};
document.getElementById("result").innerHTML = "Double of 21 is " + double(21);
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try changing the function:
Make it triple the number instead and see the result change.
Important Points
- A function expression stores a function inside a variable.
- It needs a semicolon at the end, because it is an assignment.
- Function expressions are not hoisted; define them before you call them.
- A function with no name is called an anonymous function.
- Expressions are used when a function is passed around as a value.
Conclusion
A function expression treats a function as a value that can be stored and passed around.
The key difference from a declaration is that it must be defined before it is used.
Understanding expressions prepares you for callbacks and arrow functions.