Functions 🔧

1. Typing Parameters & Return Values

In TypeScript you add a type annotation after each parameter and after the parentheses for the return value. The shape is always function name(param: Type): ReturnType. This is the single most useful thing TypeScript adds to JavaScript: call the function with the wrong kind of value and you get a red squiggle in your editor, not a 2am production crash.

// TypeScript — parameter types in green, return type after the )
function add(a: number, b: number): number {
  return a + b;
}

function shout(text: string): string {
  return text.toUpperCase() + "!";
}

// "void" = this function returns NOTHING useful (it just does something).
function log(message: string): void {
  console.log("[LOG]", message);
}

A return type of void means "this function doesn't hand a value back" — you call it for its effect (printing, saving) not its result. Run the worked example below; it's the same code with annotations removed so it executes as JavaScript.

// In real TS you write the TYPES; here we run the JS so you see the result.
// TS signature:  function add(a: number, b: number): number
//   - a and b MUST be numbers
//   - the function MUST return a number
function add(a, b) {
  return a + b;
}

console.log("add(5, 3)   =", add(5, 3));      // 8
console.log("add(10, 20) =", add(10, 20));    // 30

// TS signature:  function shout(text: string): string
function shout(text) {
  return text.toUpperCase() + "!";
}
console.log("shout('hi') =", sh
...

2. Optional & Default Parameters

Sometimes a parameter isn't always needed. Add ? after its name to make it optional — TypeScript then treats it as possibly undefined, so you must handle that case. Or give it a default value with = value: if the caller leaves it out, the default is used automatically. A default also makes the parameter optional, but you never have to check for undefined.

// Optional parameter — "greeting" may be undefined, so guard it:
function greet(name: string, greeting?: string): string {
  return (greeting ?? "Hello") + ", " + name + "!";
}

// Default parameter — cleaner: no undefined to worry about:
function greet2(name: string, greeting: string = "Hello"): string {
  return greeting + ", " + name + "!";
}
// Rule: optional/default parameters must come AFTER required ones.

Now you try. The program below is almost complete — fill in the two blanks marked ___ using the hints, then run it and check your output.

// 🎯 YOUR TURN — replace each ___ then press "Try it Yourself".
// TS signature:  function greet(name: string, greeting: string = "Hello"): string
// "greeting" has a DEFAULT, so callers can leave it out.

function greet(name, greeting) {
  // 1) If greeting is missing, fall back to "Hello".
  //    (In TS the "= 'Hello'" default does this for you automatically.)
  if (greeting === undefined) greeting = ___;   // 👉 the text "Hello" in quotes

  // 2) Build and return the message: greeting + ",
...

3. Rest Params, Arrows & Function Types

A rest parameter (...numbers: number[]) collects "any number of" trailing arguments into a typed array — perfect when you don't know how many you'll get. An arrow function is a compact way to write a function: (n: number): number => n * 2. And a function type expression lets you describe a function's shape as a reusable type, so you can pass functions around with full type safety.

// Rest parameter — the array type goes on the ...name:
function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

// Arrow function with types:
const double = (n: number): number => n * 2;

// Function TYPE EXPRESSION — name a function shape and reuse it:
type MathOp = (a: number, b: number) => number;
const multiply: MathOp = (a, b) => a * b;   // a, b inferred as number
const subtract: MathOp = (a, b) => a - b;

// Now a function can accept any MathOp:
function applyOp(a: number, b: number, op: MathOp): number {
  return op(a, b);
}

Read the worked example, then run it. Notice how applyOp takes a function as an argument — that's only safe because MathOp pins down exactly what that function must look like.

// REST PARAMETERS — collect "any number of" args into an array.
// TS signature:  function sum(...numbers: number[]): number
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
console.log("sum(1, 2, 3)        =", sum(1, 2, 3));        // 6
console.log("sum(10, 20, 30, 40) =", sum(10, 20, 30, 40)); // 100
console.log("sum()               =", sum());               // 0

// ARROW FUNCTIONS — a shorter way to write a function.
// TS signature:  const double = (n: numb
...

Your turn again — finish the average function. It uses a rest parameter and an arrow inside reduce. Fill in the two blanks:

// 🎯 YOUR TURN — fill in the blanks to finish "average".
// TS signature:  function average(...scores: number[]): number

function average(...scores) {
  // 1) Add up every score. Use reduce with an arrow function.
  const total = scores.reduce((sum, n) => sum + n, ___);  // 👉 the starting total, 0

  // 2) Guard against divide-by-zero, then return the mean.
  if (scores.length === 0) return 0;
  return ___;                                              // 👉 total / scores.length
}

console.lo
...

4. Function Overloads

An overload lets one function advertise several different typed call signatures. You write the signatures first (no body), then one implementation that handles them all. Callers only ever see the clean, specific signatures — TypeScript hides the messy string | number implementation underneath. This is how you say "this function behaves differently depending on what you give it" while keeping every call fully type-checked.

// Two overload signatures (no body) — the public contract:
function format(value: string): string;
function format(value: number): string;
// One implementation signature (must be compatible with both):
function format(value: string | number): string {
  if (typeof value === "string") {
    return value.trim().toUpperCase();
  }
  return value.toFixed(2);
}

format("hi");     // OK → string
format(3.14159);  // OK → string
// format(true);  // ❌ Error: no overload matches a boolean

Run the worked version below. The behaviour branches on typeof value at runtime, while the overload signatures give callers precise, safe types at compile time.

// FUNCTION OVERLOADS — one function, several typed call signatures.
// TS:
//   function format(value: string): string;     // overload 1
//   function format(value: number): string;     // overload 2
//   function format(value: string | number): string {  // implementation
//     ...
//   }
// Callers see ONLY the two clean signatures, not the messy implementation.

function format(value) {
  if (typeof value === "string") {
    return value.trim().toUpperCase();    // string branch
  }
  retu
...

const double = (n: number): number => n * 2;        // implicit return
const greet  = (name: string): string => {           // braces → explicit return
  const msg = "Hi " + name;
  return msg;
};

// === A tiny pricing function — everything from this lesson together ===
// TS signature:
//   function price(base: number, taxRate: number = 0.2, ...fees: number[]): string
//     - base:    required number
//     - taxRate: DEFAULT 0.2 (20%) if not given
//     - fees:    REST — zero or more extra charges
//     - returns: a string

function price(base, taxRate = 0.2, ...fees) {
  const tax = base * taxRate;                       // tax on the base
  const extra = fees.reduce((t, f) => t + f,
...

// 🎯 MINI-CHALLENGE: a flexible "joinNames" function
// TS signature to aim for:
//   function joinNames(separator: string = ", ", ...names: string[]): string
//
// 1. Give "separator" a DEFAULT of ", " (comma + space).
// 2. Use a REST parameter "...names" to accept any number of names.
// 3. Return the names glued together with the separator.
//    (hint: an array has a .join(separator) method)
// 4. If no names are passed, return "(nobody)".
//
// ✅ Expected:
//    joinNames(", ", "Ann", "Be
...