Javascript Function

1. Function Declaration

Syntax

function calculateTotal(price, tax) {
  return price + tax;
}

Real Use Case: E-commerce Checkout

function calculateTotal(price, tax) {
  return price + tax;
}

const total = calculateTotal(1000, 180);
console.log(total); // 1180

Used when calculating product totals before payment.

2. Function Expression

Syntax

const calculateDiscount = function(price) {
  return price * 0.9;
};

Real Use Case: Apply Discount

const calculateDiscount = function(price) {
  return price * 0.9;
};

console.log(calculateDiscount(1000));

Used when applying coupons or promotional discounts.

3. Arrow Function

Syntax

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

Real Use Case: React Event Handling

const users = ["John", "Peter", "Alex"];

const upperUsers = users.map(user => user.toUpperCase());
console.log(upperUsers);

Output:

["JOHN", "PETER", "ALEX"]

Used heavily in React rendering.

4. Anonymous Function

Real Use Case: Button Click

button.addEventListener("click", function() {
  console.log("Button clicked");
});

Used when functionality is needed only once.

5. Callback Function

Real Use Case: API Request

function fetchData(callback) {
  setTimeout(() => {
    callback("User data loaded");
  }, 2000);
}
fetchData(function(data) {
  console.log(data);
});

Used in asynchronous operations.

6. Higher Order Function

A function that accepts another function.

Real Use Case: Array Filtering

const users = [
  { name: "John", active: true },
  { name: "Peter", active: false }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

Used everywhere in React and Node.js.

Get Asif Raza’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

7. IIFE (Immediately Invoked Function Expression)

Real Use Case: Private Variables

(function() {
  const apiKey = "SECRET_KEY";
  console.log("Application Started");
})();

Runs once when the application loads.

8. Constructor Function

Real Use Case: User Creation

function User(name, email) {
  this.name = name;
  this.email = email;
}
const user = new User(
  "John",
  "john@gmail.com"
);
console.log(user);

Used before ES6 classes became common.

9. Recursive Function

Real Use Case: Category Tree

const categories = {
  name: "Electronics",
  children: [
    {
      name: "Mobile",
      children: []
    }
  ]
}

function printCategory(category) {
  console.log(category.name);
  category.children.forEach(child => {
    printCategory(child);
  });
}
printCategory(categories);

Used for menus, folders, comments, and trees.

10. Closure Function

Real Use Case: Counter

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Used in React hooks and state management.

11. Async Function

Real Use Case: API Calls

async function getUsers() {
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/users"
  );
  const users = await response.json();
  console.log(users);
}
getUsers();

Used in almost every modern web application.

12. Generator Function

Real Use Case: Infinite IDs

function* generateId() {
  let id = 1;
  while (true) {
    yield id++;
  }
}
const ids = generateId();
console.log(ids.next().value);
console.log(ids.next().value);

Used in task scheduling and state machines.

13. Method Function

Real Use Case: Shopping Cart

const cart = {
  items: [],
  addItem(item) {
    this.items.push(item);
  }
};
cart.addItem("Laptop");
console.log(cart.items);

Used in objects and classes.

14. Default Parameter Function

Real Use Case: User Profile

function createUser(
  name,
  role = "customer"
) {
  return {
    name,
    role
  };
}

console.log(createUser("John"));

Output:

{
  name: "John",
  role: "customer"
}

15. Rest Parameter Function

Real Use Case: Cart Total

function totalPrice(...prices) {
  return prices.reduce(
    (sum, price) => sum + price,
    0
  );
}

console.log(
  totalPrice(100, 200, 300)
);

Output:

600