JavaScript Functions and Hoisting
Functions are one of the most important concepts in JavaScript.
A function is a reusable block of code that performs a specific task.
JavaScript provides different ways to create functions, such as:
- Function Declaration
- Function Expression
- Arrow Function
- IIFE
These functions can behave differently when hoisting is involved.
What is Hoisting in JavaScript?
Hoisting is the behavior where JavaScript processes declarations before executing the code.
For example:
console.log(name);
var name = "Abishek";
Output:
undefined
This happens because the var declaration is processed before execution.
We can think of it like this:
var name;
console.log(name);
name = "Abishek";
Notice that only the declaration is processed early. The value "Abishek" is assigned later.
Hoisting does not physically move the code to the top.
The same concept also applies to functions, but the behavior depends on how the function is created.
What is a Function?
A function is a reusable block of code that performs a specific task.
Example:
function greet() {
console.log("Hello");
}
greet();
Output:
Hello
Here:
-
function greet()→ function declaration -
greet()→ function call
We can call the function whenever we need it.
1. Function Declaration
A function declaration is the normal way of creating a function.
greet();
function greet() {
console.log("Hello");
}
Output:
Hello
Why does this work?
Because function declarations are fully hoisted.
JavaScript makes the function available before executing the code.
Hoisting Rule
Function declarations can normally be called before their declaration.
Example:
greet();
function greet() {
console.log("Hello");
}
✅ Works.
2. Function Expression
A function expression is a function stored inside a variable.
const greet = function() {
console.log("Hello");
};
greet();
Here:
const greet
is a variable, and the variable stores a function.
Now look at this:
greet();
const greet = function() {
console.log("Hello");
};
Output:
ReferenceError
Why?
Because const is in the Temporal Dead Zone (TDZ) until its declaration is reached.
If we use var:
greet();
var greet = function() {
console.log("Hello");
};
Output:
TypeError: greet is not a function
Why?
Because var greet gets the value undefined before the function is assigned.
Simple Hoisting Rule
var → undefined → TypeError when called
let → TDZ → ReferenceError
const → TDZ → ReferenceError
Function expressions are not hoisted as callable functions.
3. Arrow Function
An arrow function is another way to create a function with shorter syntax.
const add = (a, b) => {
return a + b;
};
console.log(add(10, 20));
Output:
30
An arrow function is usually stored inside a variable.
For example:
add(10, 20);
const add = (a, b) => {
return a + b;
};
Output:
ReferenceError
This happens because add is declared using const, so it is in the TDZ before the declaration.
The important point is:
The variable's declaration rule decides the hoisting behavior.
For example:
const arrow function → TDZ → ReferenceError
let arrow function → TDZ → ReferenceError
var arrow function → undefined → TypeError
Hoisting Rule
Arrow functions are not hoisted as callable functions.
4. IIFE
IIFE stands for:
Immediately Invoked Function Expression
It is a function expression that runs immediately after it is created.
Example:
(function() {
console.log("Hello");
})();
Output:
Hello
Normally, we create a function and call it separately:
function greet() {
console.log("Hello");
}
greet();
But in an IIFE, the function is created and called immediately:
(function() {
console.log("Hello");
})();
The last () is used to call the function.
Hoisting Rule
An IIFE is a function expression, not a function declaration.
So it runs when JavaScript reaches that expression.
IIFE → Create function → Immediately call it
Function Hoisting: Simple Comparison
The easiest way to remember the difference is:
Function Declaration
greet();
function greet() {
console.log("Hello");
}
✅ Works
Because the function itself is fully hoisted.
Function Expression
greet();
const greet = function() {
console.log("Hello");
};
❌ ReferenceError
Because greet is a const variable and is in the TDZ.
Arrow Function
greet();
const greet = () => {
console.log("Hello");
};
❌ ReferenceError
Because greet is a const variable and is in the TDZ.
Top comments (0)