Parameters and Return

Functions: Parameters and Return 🎁

The Gift-Wrapping Story

Imagine you work at a magical gift-wrapping station. People bring you items, you wrap them beautifully, and hand back the finished gift. That’s exactly what functions do with parameters and return values!

Parameters and Arguments: What’s the Difference?

Think of parameters as empty boxes with labels. Arguments are the actual things you put in those boxes.

// "name" is the PARAMETER (the labeled box)
function sayHello(name) {
  console.log("Hello, " + name);
}

// "Luna" is the ARGUMENT (what goes in the box)
sayHello("Luna");
// Output: Hello, Luna

Simple way to remember:

• Parameter = Placeholder (in the function definition)
• Argument = Actual value (when you call the function)

graph TD
    A["Function Definition"] --> B["parameter = empty box"]
    C["Function Call"] --> D["argument = item in box"]
    B --> E["Function runs with value"]
    D --> E

Default Parameters: The Backup Plan

What if someone forgets to bring an item? You have a backup ready!

function greet(name = "Friend") {
  console.log("Hello, " + name);
}

greet("Alex");    // Hello, Alex
greet();          // Hello, Friend

The = "Friend" is like saying: “If no one gives me a name, I’ll use ‘Friend’ instead.”

Real-life example:

function orderCoffee(size = "medium", milk = "regular") {
  return size + " coffee with " + milk + " milk";
}

orderCoffee("large", "oat");  // large coffee with oat milk
orderCoffee("small");          // small coffee with regular milk
orderCoffee();                 // medium coffee with regular milk

Rest Parameters: The Infinite Bag

Sometimes you don’t know how many gifts someone will bring. The rest parameter (...) is like a magical bag that holds everything you throw at it!

function packGifts(...items) {
  console.log("Packing:", items);
}

packGifts("book", "toy", "candy");
// Packing: ["book", "toy", "candy"]

packGifts("phone");
// Packing: ["phone"]

The three dots ... before a parameter name collect ALL remaining arguments into an array.

function introduce(greeting, ...names) {
  console.log(greeting);
  names.forEach(name => {
    console.log("- " + name);
  });
}

introduce("Meet the team:", "Anna", "Bob", "Carl");
// Meet the team:
// - Anna
// - Bob
// - Carl

Rules:

• Rest parameter must be the LAST parameter
• There can only be ONE rest parameter

The Arguments Object: The Old-School Bag

Before rest parameters existed, JavaScript had a built-in arguments object. It’s like an older version of the magical bag.

function showAll() {
  console.log(arguments);
  console.log(arguments[0]);
  console.log(arguments.length);
}

showAll("apple", "banana", "cherry");
// { '0': 'apple', '1': 'banana', '2': 'cherry' }
// apple
// 3

Important differences from rest parameters:

Modern tip: Prefer rest parameters over arguments. They’re cleaner and more powerful!

Spread Operator in Functions: Unpacking the Bag

The spread operator looks the same (...) but does the OPPOSITE. It unpacks an array into individual items.

const numbers = [5, 10, 15];

// Without spread - WRONG!
console.log(Math.max(numbers));  // NaN

// With spread - CORRECT!
console.log(Math.max(...numbers));  // 15

Think of it as emptying a bag onto the table:

function addThree(a, b, c) {
  return a + b + c;
}

const values = [1, 2, 3];

// Spread "unpacks" the array
addThree(...values);  // Same as addThree(1, 2, 3)
// Returns: 6

graph TD
    A["[1, 2, 3]"] --> B["...spread"]
    B --> C["1, 2, 3"]
    C --> D["function receives separately"]

Return Statement: Handing Back the Gift

The return statement is how a function gives back a result. Once you return, the function stops immediately.

function add(a, b) {
  return a + b;
  console.log("This never runs!");  // Dead code
}

const result = add(3, 4);
console.log(result);  // 7

Key facts about return:

• A function can only return ONE value
• After return, nothing else in the function runs
• If no return, the function returns undefined

function noReturn() {
  const x = 5;
  // No return statement
}

console.log(noReturn());  // undefined

Implicit Return: The Shortcut

Arrow functions have a special superpower: implicit return. If the function body is just one expression, you can skip the curly braces AND the return keyword!

// Regular function
function double(n) {
  return n * 2;
}

// Arrow function with explicit return
const double2 = (n) => {
  return n * 2;
};

// Arrow function with IMPLICIT return
const double3 = (n) => n * 2;

// All three do the same thing!

The rule is simple: No curly braces {} = automatic return

// Implicit return examples
const square = x => x * x;
const greet = name => "Hello, " + name;
const getObject = () => ({ name: "Luna" });

Watch out for objects! You need parentheses around them:

// WRONG - JavaScript thinks {} is a code block
const bad = () => { name: "Luna" };  // Returns undefined

// RIGHT - Parentheses make it an object
const good = () => ({ name: "Luna" });  // Returns { name: "Luna" }

Early Return Pattern: The Smart Exit

Sometimes you want to leave a function early if certain conditions aren’t met. This is called the early return pattern.

Without early return (messy):

function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasPermission) {
        // Do the actual work
        return "Processing " + user.name;
      }
    }
  }
  return "Cannot process";
}

With early return (clean):

function processUser(user) {
  if (!user) return "Cannot process";
  if (!user.isActive) return "Cannot process";
  if (!user.hasPermission) return "Cannot process";

  // Do the actual work
  return "Processing " + user.name;
}

Why is early return better?

1. Less nesting (easier to read)
2. Handle edge cases first
3. Main logic stays at the bottom, unindented

graph TD
    A["Start"] --> B{user exists?}
    B -->|No| C["Return early"]
    B -->|Yes| D{user active?}
    D -->|No| C
    D -->|Yes| E{has permission?}
    E -->|No| C
    E -->|Yes| F["Do main work"]
    F --> G["Return result"]

Putting It All Together

Let’s combine everything we learned:

function createOrder(customer, ...items) {
  // Early return if no customer
  if (!customer) return "No customer!";

  // Default parameter would go in definition
  // Rest parameter collects all items

  const total = items.reduce(
    (sum, item) => sum + item.price,  // Implicit return
    0
  );

  return {
    customer: customer,
    items: items,
    total: total
  };
}

const order = createOrder(
  "Luna",
  { name: "Book", price: 15 },
  { name: "Pen", price: 3 }
);

console.log(order);
// { customer: "Luna", items: [...], total: 18 }

Quick Summary

You now have all the tools to wrap, unwrap, and deliver gifts like a pro! Functions are your gift-wrapping station - parameters are what you receive, return is what you give back. Happy coding! 🎉