# Chef’s Recipe (Declarations vs. Expressions)

Welcome back, friends! ☕

In our last post, we made our code smart using `if/else` and `switch`. But we hit a wall: if we want to grade 100 students on the Masterji platform, we had to write the same 10 lines of `if/else` code 100 times.

Developers are lazy. We don't repeat ourselves (the DRY principle: Don't Repeat Yourself). Instead, we take those 10 lines of code, put them in a box, and just press a button whenever we want to use them.

That box is called a **Function**.

But JavaScript, being the weird and wonderful language it is, gives us two different ways to hire a chef to cook our code: **Function Declarations** and **Function Expressions**. Let's look at the difference.

### 1\. Famous Dhaba (Function Declaration)

A Function Declaration is the traditional, old-school way to write a function. You give it a name, and you tell it what to do.

Let's write a function to make chai:

```javascript
// Calling the function BEFORE it's even created?!
makeChai(); 

// The Declaration
function makeChai() {
  console.log("Boiling water, adding tea leaves, sugar, and milk... Chai is ready! ☕");
}
```

Wait, look closely at that code. We called `makeChai()` on line 2, but we didn't write the recipe until line 5. **How did it not crash?!**

#### Magic of "Hoisting"

Function Declarations are like "Masterji's Famous Dhaba". Before the JavaScript engine even runs your code line-by-line, it scans the whole file, finds all the Function Declarations, and "hoists" them to the very top of memory.

Because it's officially registered in the JS phonebook from second one, you can call it from *anywhere* in your file.

### Pop-Up Food Truck (Function Expression)

Now, let's look at the second way. Remember how we learned that we can store Numbers, Strings, and Arrays inside a variable? Well, in JavaScript, **Functions are just Data Types too!** That means we can write a function and stuff it directly inside a `const` or `let` variable. This is called a **Function Expression**.

```javascript
// Trying to order before the truck arrives...
// makeCoffee(); // ❌ ERROR: Cannot access 'makeCoffee' before initialization!

const makeCoffee = function() {
  console.log("Brewing some dark roast coffee... ☕");
};

// Now you can order!
makeCoffee(); // ✅ Works perfectly.
```

#### The Knowledge Bomb: The Temporal Dead Zone (TDZ)

Wait, why did the first one crash? Is it because `const` and `let` aren't hoisted?

Actually, here is a massive JS interview secret: **They ARE hoisted.** The JS engine *knows* the `makeCoffee` variable exists from line 1. But instead of letting you use it, the engine puts it in a strict waiting area called the **Temporal Dead Zone (TDZ)**.

Think of it like this: The city knows the parking spot is reserved for the `makeCoffee` truck (it's hoisted!). But they put up yellow police tape around it until the truck actually arrives and parks. If you try to cross that tape to order coffee *before* the truck is initialized, you get tackled by security (JavaScript throws a ReferenceError!).

*(Side note: If you used the dreaded* `var` *instead of* `const`*, there is no police tape. The city just puts an empty cardboard box there that says* `undefined`*. You wouldn't get an error, but you definitely wouldn't get coffee either!)*

You can only access a Function Expression *after* it has been assigned. It gives you strict, predictable control over your code flow.

### 3\. "Anonymous" Chef

Did you notice something weird about the Function Expression above? Look at the right side of the equals sign: `function() { ... }`.

The function itself **doesn't have a name**! Because we stored it in the `makeCoffee` variable, the function doesn't need its own name. We just call the variable. A function without a name is called an **Anonymous Function**.

It’s like hiring a freelance chef. You don't care what his real name is, you just call him "The Coffee Guy" (the variable name) and he does his job.

### Which one should you use?

Honestly? Both are great.

*   Use **Function Declarations** when you want utility functions (like math calculators) that you can use anywhere in your file without worrying about order.
    
*   Use **Function Expressions** when you want strict control, or when you are passing functions around as data (which we will do a lot in React!).
    

### What's Next?

Alright, we know how to make reusable boxes of code. But typing the word `function` every single time gets exhausting.

Remember what I said? Developers are lazy. In 2015, JS gave us an ultimate shortcut that changed the way we write code forever. In our next JS Exploration, we are diving into **Arrow Functions** `() => {}`.

Drink your chai, and I'll see you there!