# Function Declaration vs Function Expression: What’s the Difference?

## What is a Function?

Think of a function as a kitchen appliance. A toaster has a specific set of instructions: take bread, heat it, and pop it out. You don't rebuild the toaster every time you want breakfast; you just press the button.

In programming, a function is a block of code designed to perform a particular task. You define it once and run it as many times as you want.

* * *

## 1\. Function Declaration: The Traditional Approach

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/19662a10-1e97-4110-ac46-08f5544f4348.png align="center")

A function declaration is the most common way to define a function. You use the `function` keyword followed by a name.

JavaScript

```plaintext
// Function Declaration
function multiplyNumbers(a, b) {
  return a * b;
}

console.log(multiplyNumbers(5, 10)); // Output: 50
```

* * *

## 2\. Function Expression: The Modern Approach

In a function expression, you create a function and assign it to a variable. The function itself doesn't usually have a name (this is called an anonymous function).

JavaScript

```plaintext
// Function Expression
const multiplyNumbers = function(a, b) {
  return a * b;
};

console.log(multiplyNumbers(5, 10)); // Output: 50
```

* * *

## The Key Differences: Hoisting and Syntax

While both do the same job, they behave differently behind the scenes. This brings us to a concept called **Hoisting**.

### What is Hoisting?

In JavaScript, declarations are "hoisted" to the top of their scope. This means the browser reads your function declarations before it runs any other code.

*   **Declarations:** You can call the function **before** you actually write it in your code.
    
*   **Expressions:** You **cannot** call the function before it is defined. If you try, the code will crash because the variable hasn't been initialized yet.
    

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Feature</strong></p></td><td colspan="1" rowspan="1"><p><strong>Function Declaration</strong></p></td><td colspan="1" rowspan="1"><p><strong>Function Expression</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Syntax</strong></p></td><td colspan="1" rowspan="1"><p><code>function name() { ... }</code></p></td><td colspan="1" rowspan="1"><p><code>const name = function() { ... }</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Hoisting</strong></p></td><td colspan="1" rowspan="1"><p>Yes (can call before definition)</p></td><td colspan="1" rowspan="1"><p>No (must define before calling)</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Usage</strong></p></td><td colspan="1" rowspan="1"><p>Global functions, general logic</p></td><td colspan="1" rowspan="1"><p>Closures, callbacks, and modern JS</p></td></tr></tbody></table>

* * *

## When to Use Which?

*   **Use Declarations** when you want a function to be available globally throughout your script and you prefer a more traditional structure.
    
*   **Use Expressions** when you want to keep your functions local to a specific part of your code, or when you are passing functions around as arguments (like in `map` or `filter`). Expressions also force you to define your functions before you use them, which often leads to cleaner, more predictable code.
    

![](https://cdn.hashnode.com/uploads/covers/696b2022eaf9a23c860920ff/df9bab6c-e53c-4174-b458-3d1b22930727.png align="center")

* * *

## Assignment Challenge: The Multiplication Test

To wrap up this assignment, let's look at how these two types behave in the real world.

### Implementation

JavaScript

```plaintext
// --- TASK 1: Function Declaration ---
console.log(calculateSquare(5)); // Works! Output: 25

function calculateSquare(n) {
  return n * n;
}

// --- TASK 2: Function Expression ---
// console.log(multiply(4, 3)); // ERROR: Cannot access 'multiply' before initialization

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 3)); // Works! Output: 12
```

By trying to call `calculateSquare` before its definition, you’ll see it works perfectly because of hoisting. But if you uncomment the call to `multiply` before its definition, you’ll see JavaScript throw an error. This is a critical distinction to remember as we move into more complex projects.