## The copy-paste trap You write `"$" + price.toFixed(2)` once. It works. Two weeks later you need it on another screen — paste. Then another — paste. Then the product team wants `£` support. You search through your entire codebase trying to find every place you pasted it. This is the copy-paste trap. The fix is a **function**. A function is a named, reusable block of code. Write the logic once. Call it by name wherever you need it. Change it in one place — it updates everywhere. --- ## The anatomy of a function Every part of a function has a job. Click each highlighted section to see what it does: A recipe has a name ("Pasta Carbonara"), ingredients it needs (eggs, pasta, cheese), and steps to follow. A function has a name, parameters it accepts, and a body that does the work. Calling a function is like saying "make this recipe with these ingredients." --- ## Parameters and arguments **Parameters** are the named placeholders you define in the function signature. **Arguments** are the actual values you pass in when calling it. ```js // "amount" and "currency" are PARAMETERS function formatPrice(amount, currency) { return `${currency}${amount.toFixed(2)}` } // 9.5 and "$" are ARGUMENTS formatPrice(9.5, "$") ``` You can have zero parameters, one, or many — separated by commas. ```js function greet() { return "Hello!" } // 0 params function double(n) { return n * 2 } // 1 param function add(a, b) { return a + b } // 2 params function clamp(n, min, max) { return Math.min(Math.max(n, min), max) } // 3 ``` --- ## How a function call actually works Watch the flow: call site → function body → return value travels back: Three things happen every time you call a function. First JavaScript sees the call and packages up your argument. Then it jumps into the function body and runs the code. Finally `return` sends a value back — and execution resumes exactly where it left off. --- ## The return statement `return` does two things: it sends a value back to the caller, and it **exits the function immediately**. Nothing after `return` runs. ```js function getDiscount(isVip) { if (isVip) { return 0.20 // ← exits here for VIP users } return 0 // ← exits here for everyone else } const discount = getDiscount(true) // 0.20 ``` A function without a `return` statement (or one that just says `return`) gives back `undefined`. Instead of nesting your happy path inside an if block, return early for the error case. Your code reads top-to-bottom without deep indentation. ```js // ✗ nested — harder to follow function processUser(user) { if (user) { if (user.isActive) { return `Processing ${user.name}` } } return "Invalid" } // ✓ early returns — reads clearly function processUser(user) { if (!user) return "Invalid" if (!user.isActive) return "Invalid" return `Processing ${user.name}` } ``` --- ## Arrow functions — the modern syntax ES6 (2015) introduced a shorter syntax for functions. Today you'll see this everywhere in modern JavaScript codebases. The implicit-return one-liner is extremely common for small transformations — especially when you'll learn about array methods in the next lesson. --- ## Default parameters You can give parameters a fallback value that's used when the caller doesn't provide one: ```js function greet(name = "stranger") { return `Hello, ${name}!` } greet("Alex") // "Hello, Alex!" greet() // "Hello, stranger!" ← default used ``` This is much cleaner than checking `if (!name)` inside the function body. --- ## Building your formatPrice function Here's what the complete solution looks like — step by step: ```js function formatPrice(amount, currency) { // 1. Decide the symbol based on currency let symbol = "$" if (currency === "GBP") symbol = "£" if (currency === "EUR") symbol = "€" // 2. Format the number to 2 decimal places const formatted = amount.toFixed(2) // 3. Return the combined string return `${symbol}${formatted}` } console.log(formatPrice(9.5, "USD")) // "$9.50" console.log(formatPrice(49, "GBP")) // "£49.00" console.log(formatPrice(100, "EUR")) // "€100.00" ``` Now if the product team adds JPY next month, you change exactly **one function** and every screen updates.