🧠 JavaScript Functions – Your Code's Superpower

Functions are the heart of JavaScript. They make code reusable, organized, and logical. Whether you're building a frontend UI or writing backend APIs, functions power everything.

In this blog, we’ll explore:

• Function declarations vs expressions

• Arrow functions

• Real-world use cases

• Common gotchas

---

🛠️ 1. What is a Function?

A function is a block of code designed to perform a task.

function greet() {
  console.log("Hello, world!");
}
greet(); // Hello, world!

---

🧾 2. Function Declaration

This is the traditional way to define a function:

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

console.log(add(2, 3)); // 5

✅ Hoisted — You can call it before it’s defined in the code.

---

🧾 3. Function Expression

Assign a function to a variable:

const subtract = function (a, b) {
  return a - b;
};

console.log(subtract(5, 2)); // 3

❌ Not hoisted — Must be defined before it’s called.

---

⚡ 4. Arrow Functions

Introduced in ES6, arrow functions are a concise way to write functions.

const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

If there's only one parameter and one return line:

const square = x => x * x;

---

🚧 Arrow Function vs Normal Function

✅ Arrow Functions:

• Cleaner syntax

• Do not bind their own this (uses parent scope)

🚫 Not good for:

• Constructors (new)

• When you need your own this

---

🧩 5. Real-World Examples

🧑‍💻 Example 1: Greeting Users in a Web App

function greetUser(name) {
  return `Welcome, ${name}!`;
}

console.log(greetUser("Clariofy")); // Welcome, Clariofy!

---

🧑‍💻 Example 2: Arrow Function in map()

const prices = [100, 200, 300];
const discounted = prices.map(p => p * 0.9);
console.log(discounted); // [90, 180, 270]

---

🧑‍💻 Example 3: Callback Function

function processPayment(amount, callback) {
  console.log("Processing:", amount);
  callback();
}

processPayment(250, () => {
  console.log("Payment Successful!");
});

---

⚠️ 6. Common Pitfalls

• Forgetting return in multi-line arrow functions:

const getName = () => {
  name: "Alex";
};
// returns undefined!

// Correct way:
const getNameCorrect = () => {
  return { name: "Alex" };
};

• Using this inside an arrow function in methods can lead to bugs.

---

🧠 Summary

---

🔮 Up Next:

Callback, Promise & Async/Await — mastering async flow in JS!