Coaching Styles: Function Declaration vs. Function Expression 📋

Imagine you are the manager. Sometimes you give a speech in the dressing room before the game (Declaration), and sometimes you make a quick tactical tweak during the 70th minute (Expression).

1. What is a Function?

A function is like a Set Piece in football. You practice a corner kick routine so that during the match, you can just say "Run Routine A," and everyone knows exactly what to do.

// A simple function to add two goals
function addGoals(a, b) {
    return a + b;
}
console.log(addGoals(2, 1)); // Output: 3

---

2. Function Declaration (The Pre-Match Speech)

A Function Declaration is the "traditional" way. It starts with the function keyword followed by a name.

Key Feature: Hoisting.

In JavaScript, Declarations are hoisted. This means the team (the browser) reads all your declarations before the game even starts. You can call the function before it appears in your code!

// Calling CR7's celebration before it's even defined!
celebrate(); // ✅ Output: SIUUUUU!

function celebrate() {
    console.log("SIUUUUU!");
}

---

3. Function Expression (The Tactical Adjustment)

A Function Expression is when you create a function and assign it to a variable.

Key Feature: No Hoisting.

The team only learns this instruction when the code reaches that specific line. If you try to call a Function Expression too early, the referee will blow the whistle and give you an Error.

// shout(); // ❌ ERROR: Cannot access 'shout' before initialization

const shout = function() {
    console.log("VAMOS!");
};

shout(); // ✅ Now it works!

---

4. Declaration vs. Expression: Side-by-Side

Feature	Function Declaration	Function Expression
Syntax	function name() { ... }	const name = function() { ... }
Hoisting	Yes (Can call it anywhere)	No (Must define it first)
Usage	Global, general-purpose logic	Specific logic, passed around like data

---

5. When to use which?

• Use Declarations when you want a function to be available throughout your entire file—like a general team philosophy.

• Use Expressions when you want to keep your functions "local" or pass them as arguments to other functions (like those Array Methods we learned earlier!). It helps keep your code organized and prevents "hoisting" surprises.

---

🏆 Daily Drill: The Multiplier Challenge ⚽

Head to your console and practice your coaching styles:

1. The Declaration: Write a function declaration called multiply that takes two numbers and returns their product. Call it above the function definition.

2. The Expression: Write the exact same logic using a function expression assigned to a variable named multiplyExp. Call it above the definition and observe the error.

3. The Fix: Move the call for multiplyExp below the definition and log the result to the console.

Why do you think JavaScript allows us to call Declarations early but not Expressions? Tell me your theory in the comments!