Function in JavaScript

🌱 What is a Function? (First Principle)

A function is like a worker.

Just like a tea master in a shop:

• You give an order
• The tea master prepares tea
• The tea is given back to you

---

👉 In programming:

A function is a reusable block of code that takes input, performs a task, and optionally returns output.

---

☕ Simple Example

function makeTea() {
    console.log("Tea is ready");
}

makeTea();

👉 Here:

• makeTea = worker
• calling it = giving instruction

---

📥 Functions with Input (Parameters)

Workers become more useful when they accept instructions.

function makeTea(sugar) {
    console.log("Tea with " + sugar + " spoons of sugar");
}

makeTea(2);
makeTea(1);

👉 Same function, different results.

---

📤 Functions with Output (Return Value)

Some workers not only do work — they give results back.

function add(a, b) {
    return a + b;
}

let result = add(5, 3);

👉 return sends the result back.

---

🧾 Types of Functions

---

1. Function Declaration

function greet() {
    console.log("Hello");
}

✔ Can be used before it is written (hoisting)

---

2. Function Expression

const greet = function() {
    console.log("Hello");
};

❌ Cannot be used before definition

---

3. Arrow Function

const add = (a, b) => a + b;

✔ Short and modern syntax

---

🧠 Functions are First-Class Citizens

In JavaScript:

Functions are treated like values.

That means:

• They can be stored in variables
• Passed as arguments
• Returned from other functions

---

Example:

function sayHello() {
    return "Hello";
}

function execute(fn) {
    console.log(fn());
}

execute(sayHello);

---

🔁 Callback Functions

A callback is a function passed into another function.

function processTask(callback) {
    console.log("Processing...");
    callback();
}

processTask(() => {
    console.log("Done!");
});

---

⏳ Asynchronous Functions

JavaScript can run tasks later without stopping everything.

setTimeout(() => {
    console.log("Task completed");
}, 2000);

---

🚀 Promises

Promises make async code cleaner.

const promise = new Promise((resolve) => {
    resolve("Success");
});

promise.then(result => console.log(result));

---

✨ Async/Await

Modern and easy way to handle async operations.

async function getData() {
    let response = await fetch("url");
    let data = await response.json();
    return data;
}

---

🔐 Closures

A closure allows a function to remember its outer variables.

function counter() {
    let count = 0;

    return function() {
        count++;
        return count;
    };
}

const c = counter();

c(); // 1
c(); // 2

---

🧭 Scope

Scope defines where variables can be accessed.

function outer() {
    let x = 10;

    function inner() {
        console.log(x);
    }

    inner();
}

---

🎭 The this Keyword

this refers to the object calling the function.

const user = {
    name: "Jegan",
    greet() {
        console.log(this.name);
    }
};

---

🏗️ Constructor Functions

Functions can create objects.

function User(name) {
    this.name = name;
}

const u1 = new User("Jegan");

---

🧪 Higher-Order Functions

Functions that use other functions.

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

---

⚙️ Behind the Scenes

When a function runs:

• JavaScript creates an execution context
• Uses a call stack to manage execution

---

🌍 Real-World Usage

Functions are used everywhere:

• Backend (APIs, controllers)
• Frontend (events, UI updates)
• Data processing
• Business logic

---

🧠 Final Understanding

A function is a reusable worker in your program.

It can:

• Take input
• Perform a task
• Return output
• Work with other functions
• Manage data and logic

---

🧒 Simple Definition (Child Level)

A function is a helper that does a job when you ask it.

---

🚀 Conclusion

Functions are not just a feature of JavaScript —
they are the foundation of everything you build.

If you master functions, you master JavaScript.

---