1. Reusable Recipe Blocks

A function is a block of reusable code designed to perform a specific task when invoked (called).

2. Why It Matters

Functions eliminate repetitive copy-pasting, isolate complex business rules into modular building blocks, and allow code to process dynamic arguments.

3. Parameters vs. Arguments & The return Keyword

• Parameters: Variable placeholders listed inside the function declaration.
• Arguments: Actual values passed into the function when called.
• return: Exits the function execution and passes the computed output back to the caller.

// Function Declaration with parameters (length, width)
function calculateArea(length, width) {
  const area = length * width;
  return area; // Explicit return value
}

// Invocation with arguments (10, 5)
const roomArea = calculateArea(10, 5);
console.log(roomArea); // 50

4. Default Parameters

Provide fallback values for parameters in case arguments are omitted during invocation:

function greetUser(name = "Guest", role = "Member") {
  return `Welcome, ${name}! Role: ${role}.`;
}

console.log(greetUser());               // "Welcome, Guest! Role: Member."
console.log(greetUser("Sarah", "Admin")); // "Welcome, Sarah! Role: Admin."

5. Common Mistakes

• Forgetting the return Keyword: If a function does not contain an explicit return statement, JavaScript automatically returns undefined when invoked!
• Confusing Function Declaration with Execution: Defining a function function doSomething() {} does NOT run the code inside it. You must explicitly invoke it: doSomething().

6. Try It Yourself

Write it yourself. The tests below run against your code.

function doubleNumber(x) {
  return 0;
}

7. Next Steps

Always ensure utility functions return explicit results. Next, let's peek under the hood at how JavaScript executes code using Execution Contexts!