Function Declaration vs Function Expression: What’s the Difference?
Functions are one of the most important concepts in JavaScript.
They allow developers to reuse code instead of writing the same logic multiple times.
For example, if we need to calculate something like addition or multiplication multiple times, we can create a function and call it whenever needed.
What Are Functions?
A function is a reusable block of code that performs a specific task.
Example:
function add(a, b) {
return a + b;
}
console.log(add(5, 3));
Output:
8
Here the function adds two numbers and returns the result.
Function Declaration
A function declaration defines a function using the function keyword with a name.
Syntax
function functionName(parameters) {
// code
}
Example
function multiply(a, b) {
return a * b;
}
console.log(multiply(4, 5));
Output
20
This is the traditional and commonly used way to define functions.
Function Expression
A function expression is when a function is stored inside a variable.
Syntax
const functionName = function(parameters) {
// code
};
Example
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5));
Output
20
Here the function is assigned to a variable.
Declaration vs Expression (Side-by-Side)
Function Declaration
function greet(name) {
return "Hello " + name;
}
Function Expression
const greet = function(name) {
return "Hello " + name;
};
Both produce the same output, but they behave slightly differently.
Basic Idea of Hoisting
In JavaScript, some declarations are moved to the top of their scope during execution.
This behavior is called hoisting.
Function Declaration (Hoisted)
You can call the function before it is defined.
console.log(add(2,3));
function add(a,b){
return a+b;
}
Output
5
This works because function declarations are hoisted.
Function Expression (Not Hoisted)
Calling it before definition causes an error.
console.log(add(2,3));
const add = function(a,b){
return a+b;
};
This will cause an error because the variable is not initialized yet.
Key Differences
| Feature | Function Declaration | Function Expression |
|---|---|---|
| Syntax | Uses function keyword |
Function stored in variable |
| Hoisting | Yes | No |
| Call before definition | Works | Causes error |
| Usage | General functions | Callbacks, dynamic functions |
When to Use Each Type
Use Function Declaration
For general reusable functions
When you want the function available anywhere in the file
Example:
function calculateTotal(price, tax) {
return price + tax;
}
Use Function Expression
When assigning functions to variables
When passing functions as arguments
Example:
const greetUser = function(name) {
return "Hello " + name;
};
Assignment Practice
Function Declaration
function multiply(a, b) {
return a * b;
}
console.log(multiply(3, 4));
Output
12
Function Expression
const multiplyExp = function(a, b) {
return a * b;
};
console.log(multiplyExp(3, 4));
Output
12
Try Calling Before Definition
Declaration (Works)
console.log(square(4));
function square(num){
return num * num;
}
Expression (Error)
console.log(square(4));
const square = function(num){
return num * num;
};
This will produce an error because function expressions are not hoisted.