Functions: Inputs, Reusability & Return Values

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

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. Next Steps

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