Function Declaration vs Function Expression: What’s the Difference?
When programs grow bigger, repeating the same code again and again becomes messy. This is where functions help.
A function is simply a reusable block of code that performs a specific task. Instead of writing the same logic multiple times, you write it once inside a function and call it whenever you need it.
Think of it like a recipe.
Once you write the recipe, you can cook the same dish anytime without rewriting the steps.
Why Do We Need Functions?
Functions help us to:
• Reuse code instead of repeating logic
• Organize programs into smaller pieces
• Improve readability
• Make debugging easier
Example without a function:
let sum1 = 2 + 3;
console.log(sum1);
let sum2 = 5 + 7;
console.log(sum2);
We are repeating logic.
Using a function:
function add(a, b) {
return a + b;
}
console.log(add(2, 3));
console.log(add(5, 7));
Now the same logic is reusable.
Function Declaration
A function declaration defines a function using the function keyword followed by a name.
Syntax:
function functionName(parameters) {
// code
}
Example:
function greet(name) {
return "Hello " + name;
}
console.log(greet("Akhil"));
Here:
• greet is the function name
• name is the parameter
• "Hello " + name is the logic
Function Expression
There is one more way to create a function is using a function expression.
In this approach, we store a function inside a variable.
Syntax:
const variableName = function(parameters) {
// code
}
Example:
const greet = function(name) {
return "Hello " + name
}
console.log(greet("Akhil"))
The behavior is the same, but the function is now stored inside a variable.
You can think of it like assigning a function to a variable and using that variable to call it.
Function Declaration vs Function Expression
Let’s compare them side by side.
Function Declaration
function add(a, b) {
return a + b
}
Function Expression
const add = function(a, b) {
return a + b
}
At first time they look very similar.
But internally they behave differently.
A Simple Idea of Hoisting
In JavaScript there is a behavior called hoisting.
In simple terms, JavaScript processes function declarations before running the rest of the code.
Because of this, a function declaration can be called even before it appears in the code.
Example:
sayHello()
function sayHello() {
console.log("Hello!")
}
This works perfectly fine.
Now look at the same thing using a function expression.
sayHello()
const sayHello = function() {
console.log("Hello!")
}
This will throw an error because the variable doesn't been initialized yet.
You don’t need to worry about deep internals right now. Just remember:
function declarations are hoisted
function expressions are not
When Should You Use Each?
Use Function Declarations when
you want a reusable named function
you want to call the function anywhere in the file
Example:
function calculateTotal(price, tax) {
return price + tax
}
Use Function Expressions when
you want to store functions in variables
you want to pass functions around as values
you want more control over when the function becomes available
Example:
const calculateTotal = function(price, tax) {
return price + tax
}
Both approaches are useful. As you write more JavaScript, you'll see both are used.
Assignment
Try these exercises to understand the concept better.
1. Function Declaration
Write a function declaration that multiplies two numbers
2. Function Expression
Write the same logic using a function expression.
3. Call Both Functions
Print the result in the console.
4. Experiment with Hoisting
Try calling both functions before defining them.
Final Thoughts
Functions are one of the most important building blocks in JavaScript.
Once you get comfortable with them, many advanced concepts like callbacks, closures, and async programming start making much more sense.
I hope this blog provide some value in your knowledge see you next time with some new topic..
