Functions and Arrow Functions in TypeScript

Great! Let’s dive into Functions and Arrow Functions in TypeScript (used throughout Angular apps for clean and modular code).

---

🔹 1. Traditional Functions

A function is a reusable block of code that performs a specific task.

✅ Basic Syntax

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

console.log(add(5, 3)); // Output: 8
    

➕ Optional & Default Parameters

function greet(name: string = "Guest"): string {
  return `Hello, ${name}`;
}

console.log(greet());         // Hello, Guest
console.log(greet("Alice"));  // Hello, Alice
    

---

🔹 2. Arrow Functions

Arrow functions offer a shorter syntax and lexical this binding, commonly used in Angular for callbacks and concise logic.

✅ Basic Syntax

const multiply = (x: number, y: number): number => {
  return x * y;
};

console.log(multiply(4, 2)); // Output: 8
    

➕ Implicit Return (single expression)

const square = (n: number): number => n * n;
console.log(square(5)); // 25
    

---

🔹 3. Arrow Function vs Traditional Function

Feature	Traditional Function	Arrow Function
Syntax	Verbose	Concise
this context	Dynamic	Lexical (inherits from parent)
Usage in Angular	Good for service methods	Great for observables, callbacks

---

🔹 4. Function with Interface (e.g., Angular Callback)

interface Operation {
  (a: number, b: number): number;
}

const divide: Operation = (x, y) => x / y;
console.log(divide(10, 2)); // Output: 5
    

---

🧠 Summary

• Use traditional functions when needing dynamic this.
• Use arrow functions for brevity and when using observables, callbacks, or functional programming patterns.
• You can add types to parameters and return values for safety and clarity.

---