Function Declaration vs Function Expression: What’s the Difference? A Beginner-Friendly Guide to Function Declaration, Function Expression, and Hoisting
Think about BGMI.
You spot an enemy behind a rock. You aim your M416 and press the shoot button.
In just a second, many things happen automatically:
The bullet fires
The gun recoil kicks in
The damage is calculated
The enemy’s HP decreases
All of this happens instantly, but the game developers didn’t rewrite this logic every time you press the shoot button.
Instead, they created a reusable block of code that handles the shooting mechanics.
Whenever you press the shoot button, the game simply calls that block of code again.
In programming, these reusable blocks of code are called functions. Functions allow us to write logic once and reuse it whenever we need it.
What Functions Are and Why We Need Them
A function in JavaScript is a reusable block of code that performs a specific task. Instead of writing the same logic again and again, we write it once inside a function and call it whenever we need it.
For example, imagine we want to add two numbers many times in our program.
function add(a, b) {
return a + b;
}
console.log(add(2, 3));
console.log(add(10, 5));
Here the function add performs the addition whenever we call it. This keeps the code clean and reusable.
Function Declaration Syntax
A function declaration defines a function using the function keyword followed by the function name.
function greet(name) {
console.log("Hello " + name);
}
greet("Tejas");
function → keyword used to create the function
greet → function name
name → parameter
Code inside {} → function body
Whenever we call greet(), the code inside the function runs.
Function Expression Syntax
Another way to create a function is by using a function expression. Here the function is stored inside a variable.
const greet = function(name) {
console.log("Hello " + name);
};
greet("Tejas");
Difference between Function declaration and Function expression
Function declarations and function expressions are both ways to create functions, but they behave differently in some cases.
Function Declaration | Function expression |
It defined using function keyword with a name. | It is assigned to variable and function can be anonymous or named. |
Syntax: | Syntax: |
Hoisted completely to the top of the scope, it means you can call it before it appears in the code. Example : | Not fully hoisted only the variable is hoisted it means you cannot call it before it is defined. Example : |
RCB() is written later, it still works because JavaScript hoists entire function. | RCB() is treated like variable declared with const or let which isn't usable before initialization. |
Hoisting
Before understanding hoisting, we need to understand how JavaScript runs code behind the scenes.
Let’s look at what the JavaScript engine does behind the scenes.
JavaScript is a single-threaded language, which means it runs code line by line. When we run the code, the JavaScript engine first prepares the execution environment, and that is where hoisting happens.
Think of it like this: the JavaScript engine does three big things when running a program.
Global execution context
This contains the Memory component and code code component
This is where the hoisting happens.
Memory Allocation Phase
Before running the code, the JavaScript engine scans the file and stores declarations.
console.log(a);
add(2,3);
var a = 10;
function add(x, y){
return x + y;
}
Memory after creation phase looks like this,
a = undefined
add = complete function code
This is hoisting.
Execution Phase
After the memory phase, JavaScript starts executing the code line by line.
Call Stack
Whenever a function runs, JavaScript create the new execution context (local execution context ) and pushes it into the call stack when the function completes its execution then it will go out of the call stack.
Understanding Hoisting with a Gaming Example
Imagine you are playing BGMI, before the match starts, the game already loads some important weapons into the map.
For example , M416 , DP-28.
Even if you haven’t reached that location yet. The weapon does not exist until you open the crate. Only after opening the crate does the weapon appear.
This is similar to function declarations in JavaScript.
Even if the function is written later in the code, JavaScript already loads it during the initial phase. That’s why you can call it before it appears in the file.
shoot();
function shoot() {
console.log("Enemy hit");
}
This works because the function was already prepared by JavaScript.
Now imagine another situation.
You open a loot box during the match, the weapon does not exist until you open the crate. only after opening the crate does the weapon appear.
This is similar to a function expression.
The function only exists after the code reaches that line.
Example:
shoot();
const shoot = function() {
console.log("Enemy hit");
};
This will cause an error because the function is not ready yet.
Now we know the hoisting now understand this for function declaration and function expression.
| Function declaration | function expression |
|---|---|
| function declarations are hoisted this means we can call the function before it is written in the code. | function expression is not hoisted if we try to call the function before it is written is give the error. |
Example: shoot(); function shoot() { console.log("Enemy hit"); } This works because JavaScript moves the function declaration to the top internally. |
Example: shoot() const shoot= function() { console.log("Enemy hit"); }; This will cause an error. Because variable shoot is not assigned the function yet. So the function cannot be used before it is defined. |
When to Use Each Type
a) Use Function Declaration when, you want a reusable function OR function is part of the main logic
Example: calculation, validation, formatting.
b) Use Function Expression when, assigning functions to variables OR Using callbacks OR Working with event handlers.
Example:
button.addEventListener("click", function() {
console.log("Button clicked");
});
Practice Challenge: Function Declaration vs Function Expression
Now it’s your turn to practice.
Task 1: Function Declaration
Write a function declaration that multiplies two numbers.
Example structure:
function multiply(a, b) {
// write your logic here
}
Call the function and print the result in the console.
Task 2: Function Expression
Now write the same logic using a function expression.
Example structure:
const multiplyNumbers = function(a, b) {
// write your logic here
};
Call this function and print the result.
Task 3: Observe the Behavior
Now experiment with the code.
Try calling both functions before they are defined.
Example:
multiply(4, 5);
and
multiplyNumbers(4, 5);
Observe what happens in each case.
Final Thought
Functions are one of the most powerful features in JavaScript because they allow us to organize and reuse code efficiently.
Understanding the difference between function declarations and function expressions also introduces an important concept called hoisting, which affects how JavaScript executes code.
Once you are comfortable with functions, you will find it much easier to build larger and more structured programs.