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

In programming, a function is a **reusable block of code**. Think of it like a "mini-machine": you build it once, and then you can press a button to run it whenever you need to perform a specific task, like calculating a sum or formatting a user's name.

Topics that we are going to discuss in this blog are as follows.

*   Why Do We Need Functions?
    
*   Function Declaration
    
*   Function Expression
    
*   Key differences between declaration and expression
    
*   Basic idea of hoisting (very high level)
    
*   When to use each type
    

* * *

## Why Do We Need Functions?

Imagine you need to multiply two numbers in ten different places in your code. Instead of writing `a * b` ten times, you write a function once. If you ever need to change how that calculation works (e.g., adding tax), you only change it in one-place.

* * *

## Function Declaration (The Standard Way)

A **Function Declaration** is the most common way to define a function. You use the `function` keyword, give it a name, and define its logic.

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

console.log(multiply(5, 4)); // Output: 20
```

* * *

## Function Expression (The Variable Way)

A **Function Expression** is when you create a function and assign it to a variable. In this case, the function is often "anonymous" (it doesn't have its own name) because the variable name is used to call it.

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

console.log(multiplyExpr(5, 4)); // Output: 20
```

* * *

## The "Hoisting" Difference (High Level)

This is where things get interesting. In JavaScript, **Hoisting** is a behavior where the engine moves declarations to the top of the code before running it.

*   **Declarations are hoisted:** You can call a function *before* you even define it in your code.
    
*   **Expressions are NOT hoisted:** If you try to call a function expression before it’s defined, your code will crash.
    

```plaintext
// This works! (Hoisted)
sayHello(); 
function sayHello() {
  console.log("Hello from the declaration!");
}

// This crashes! (Not hoisted)
sayHi(); 
const sayHi = function() {
  console.log("Hi from the expression!");
};
```

* * *

## When to Use Which?

*   **Use Declarations** when you want a function to be available everywhere in your script or for general utility functions.
    
*   **Use Expressions** when you want to keep your code organized, limit where a function can be accessed, or when you’re passing functions into other methods (like `map` or `filter`).
    

* * *

## Conclusion

Whether you prefer the traditional declaration or the modern expression, the goal is the same: **reusability**. By moving your logic into functions, you make your code more organized and much easier to debug. Checkout the cover image to brush up this blog.