Tag: JavaScript Functions

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 Raju

Why This Works

• greet is 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

8

Key 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

8

Shorter 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 second

Why 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 executed

Why 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

15

How It Works

1. add function is passed
2. calculate calls 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

10

Why 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
• this refers 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

1
2

Why 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 received

Why Async Functions Matter

• Avoid callback hell
• Easier to read than .then()

Used For

✔ API calls
✔ Database queries
✔ File operations

Summary

Final Advice for Beginners

Don’t try to memorize everything.

Instead:

1. Start with function declaration
2. Learn arrow functions
3. Understand callbacks & async
4. Explore others gradually

Master functions, and JavaScript will stop feeling hard.