Functions are the heart of JavaScript.
If you understand functions well, half of JavaScript becomes easy.
But beginners often ask:
- Why are there so many types of functions?
- When should I use which one?
- Do they behave differently?
This guide explains each type slowly, with examples and output, so junior developers can understand without confusion.
What Is a Function?
A function is a block of code that performs a task and can be reused.
Instead of writing the same logic again and again, we write it once and call it whenever needed.
1️⃣ Function Declaration (Named Function)
What it is
A function defined using the function keyword with a name.
Example
function greet(name) { return "Hello " + name;}console.log(greet("Raju"));Output
Hello RajuWhy This Works
greetis the function name"Raju"is passed as an argument- Function returns a string
Important Points
- Function declarations are hoisted
- You can call them before definition
Best Use Case
✔ General-purpose logic
✔ Beginner-friendly
✔ Reusable functions
2️⃣ Function Expression
What it is
A function stored inside a variable.
Example
const add = function(a, b) { return a + b;};console.log(add(5, 3));Output
8Key Difference from Declaration
- Function is created at runtime
- Not hoisted
When to Use
✔ When function should exist only after assignment
✔ When passing functions as values
3️⃣ Arrow Function
What it is
A shorter syntax introduced in ES6.
Example
const multiply = (a, b) => { return a * b;};console.log(multiply(4, 2));Output
8Shorter Version
const multiply = (a, b) => a * b;Why Arrow Functions Exist
- Less code
- Cleaner syntax
- Very useful in callbacks
Important Note for Juniors
❌ Arrow functions do not have their own this
✔ Avoid them when working with objects and this
4️⃣ Anonymous Function
What it is
A function without a name.
Example
setTimeout(function() { console.log("This runs after 1 second");}, 1000);Output
This runs after 1 secondWhy Use Anonymous Functions?
- Used only once
- No need to name it
When to Use
✔ One-time operations
✔ Callbacks
❌ Not for reusable logic
5️⃣ Immediately Invoked Function Expression (IIFE)
What it is
A function that runs immediately after it is created.
Example
(function() { console.log("IIFE executed");})();Output
IIFE executedWhy IIFE Was Popular
- Creates private scope
- Avoids polluting global variables
Modern Usage
- Less common now (due to modules)
- Still useful to understand legacy code
6️⃣ Callback Function
What it is
A function passed as an argument to another function.
Example
function calculate(a, b, callback) { return callback(a, b);}function add(x, y) { return x + y;}console.log(calculate(10, 5, add));Output
15How It Works
addfunction is passedcalculatecalls it internally
Real-World Use
✔ Events
✔ API calls
✔ Timers
Callbacks are the foundation of async JavaScript.
7️⃣ Higher-Order Function
What it is
A function that:
- Takes another function as input
OR - Returns another function
Example
function createMultiplier(multiplier) { return function(number) { return number * multiplier; };}const double = createMultiplier(2);console.log(double(5));Output
10Why This Is Powerful
- Code reusability
- Cleaner abstraction
Used Heavily In
✔ map, filter, reduce
✔ Functional programming
8️⃣ Constructor Function
What it is
A function used to create objects.
Example
function User(name, age) { this.name = name; this.age = age;}const user1 = new User("Raju", 30);console.log(user1);Output
User { name: 'Raju', age: 30 }Important Rule
- Must be called using
new thisrefers to the new object
Modern Alternative
✔ ES6 class (recommended today)
9️⃣ Generator Function
What it is
A function that can pause and resume execution.
Example
function* numbers() { yield 1; yield 2; yield 3;}const gen = numbers();console.log(gen.next().value);console.log(gen.next().value);Output
12Why Generators Exist
- Lazy execution
- Memory efficient
Use Case
✔ Iteration control
✔ Advanced async flows
🔟 Async Function
What it is
A function that handles asynchronous code cleanly using async/await.
Example
async function fetchMessage() { return "Data received";}fetchMessage().then(result => console.log(result));Output
Data receivedWhy Async Functions Matter
- Avoid callback hell
- Easier to read than
.then()
Used For
✔ API calls
✔ Database queries
✔ File operations
Summary
| Function Type | Why It Exists |
|---|---|
| Declaration | Simple reusable logic |
| Expression | Conditional execution |
| Arrow | Short callbacks |
| Anonymous | One-time use |
| IIFE | Immediate execution |
| Callback | Async handling |
| Higher-Order | Reusability |
| Constructor | Object creation |
| Generator | Controlled iteration |
| Async | Clean async code |
Final Advice for Beginners
Don’t try to memorize everything.
Instead:
- Start with function declaration
- Learn arrow functions
- Understand callbacks & async
- Explore others gradually
Master functions, and JavaScript will stop feeling hard.
