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

In our previous part of the **JavaScript Decoded** series, we learned how to make our code think and make decisions using if, else, and switch statements. Now, it's time to take the next big step: organizing our code into reusable blocks.

Welcome to the powerhouse of JavaScript: **Functions**.

If you find yourself writing the exact same code multiple times, you are doing too much work! Functions fix this. In JavaScript, there are two primary ways to create them: **Function Declarations** and **Function Expressions**. Today, we'll break down exactly what they are, how they differ, and when you should use each one.

In this guide, you will learn:

*   What functions are and why we need them
    
*   Function declaration syntax
    
*   Function expression syntax
    
*   The key differences between the two
    
*   How "hoisting" works (in plain English)
    
*   When to use which
    

Let's dive in! 🚀

* * *

## What Are Functions and Why Do We Need Them?

Imagine you are building a calculator app. Every time a user clicks "+", you need to add two numbers. Instead of writing the addition logic over and over again for every single button click, you write it **once** inside a function.

A **function** is simply a reusable block of code designed to perform a specific task. You write the code once, give it a name, and then you can "call" (or execute) it as many times as you want.

### The Benefits of Functions:

1.  **Reusability**: Write once, use everywhere.
    
2.  **Readability**: Code is organized into logical chunks with descriptive names.
    
3.  **Maintainability**: If you need to fix a bug in your logic, you only have to fix it in one place!
    

* * *

## 1\. Function Declaration Syntax

A **Function Declaration** is the most traditional way to write a function in JavaScript.

It starts with the `function` keyword, followed by the name of the function, parentheses `()`, and curly braces `{}`.

### Example: Adding Two Numbers

```javascript
// Defining the function
function addNumbers(a, b) {
  return a + b;
}

// Calling the function
let sum = addNumbers(5, 10);
console.log(sum); // Output: 15
```

**How it works:**

*   `function`: The keyword that tells JavaScript you are creating a function.
    
*   `addNumbers`: The name of the function (you can name it whatever you want).
    
*   `(a, b)`: These are **parameters**—ingredients the function needs to do its job.
    
*   `return a + b;`: The output that the function gives back to you.
    

* * *

## 2\. Function Expression Syntax

A **Function Expression** is when you create a function and store it directly inside a variable.

Instead of naming the function itself, you create an "anonymous" function (a function without a name) and assign it to a variable using `=`.

### Example: Adding Two Numbers (Expression Style)

```javascript
// Defining the function as an expression
const addNumbersExpression = function(a, b) {
  return a + b;
};

// Calling the function
let sum = addNumbersExpression(5, 10);
console.log(sum); // Output: 15
```

Notice the syntax difference? The logic inside the curly braces is identical. You still call it exactly the same way: `addNumbersExpression(5, 10)`. The only difference is *how* we defined it.

* * *

## Key Differences: Declaration vs. Expression

Why does JavaScript have two different ways to do the exact same thing? While they look similar, they behave differently under the hood.

Here is a quick comparison table before we look at the biggest difference: Hoisting.

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| **Syntax** | Starts with `function` keyword | Assigned to a variable (e.g., `const fn = function()`) |
| **Name** | Must have a name | Usually anonymous (stored in a named variable) |
| **Hoisting** | Fully hoisted (can be called before defined) | Not hoisted (cannot be called before defined) |

* * *

## The Big Difference: Hoisting (Explained Simply)

The most important difference between a Declaration and an Expression is **Hoisting**.

Hoisting is a JavaScript behavior where variable and function declarations are "lifted" to the top of your code before the code is actually executed.

### Function Declarations ARE Hoisted

Because function declarations are hoisted, **you can call the function before you define it in your code.**

```javascript
// Calling the function BEFORE it is defined!
greetUser("Debesh"); // Output: "Hello, Debesh!"

// The definition is further down
function greetUser(name) {
  console.log("Hello, " + name + "!");
}
```

*Why does this work?* JavaScript scans your file, sees the `function greetUser()`, pulls it to the top of memory, and *then* runs your code line-by-line.

### Function Expressions Are NOT Hoisted

Because function expressions are stored inside variables (like `const` or `let`), they are **not hoisted** in the same way. You **cannot** call them before you define them.

```javascript
// Trying to call it BEFORE it is defined
greetUserExpression("Debesh"); // ❌ ReferenceError: Cannot access 'greetUserExpression' before initialization

// The definition
const greetUserExpression = function(name) {
  console.log("Hello, " + name + "!");
};
```

*Why does this fail?* JavaScript knows the variable `greetUserExpression` exists, but because it is `const`, it throws an error if you try to use it before the code actually reaches the line where the function is assigned to it.

* * *

## How Code Flows: Visualizing the Execution

Here is a simple way to visualize how your code executes when you call a function:

![](https://cdn.hashnode.com/uploads/covers/69621b56fb014a5ee98b8996/356ac6f8-a57d-455c-b5f9-9a6e872e2fb0.png align="center")

* * *

## When To Use Which?

Now that you know the difference, which one should you use?

1.  **Use Function Declarations** when you want your functions to be available globally throughout your file, regardless of where they are placed. Many developers like putting all their function declarations at the *bottom* of a file to keep the top of the file clean.
    
2.  **Use Function Expressions** when you want to enforce strict, top-to-bottom reading of your code. Because they aren't hoisted, it forces you to define your functions *before* you use them, which can prevent confusing bugs.
    

*(Note: In modern JavaScript, you will often use an even shorter syntax called* ***Arrow Functions*** *for expressions, which we will cover in the next part of this series!)*

* * *

## Your Turn: Assignment Time! 💻

To truly understand this, you need to write it yourself. Open up your code editor and try this:

1.  Write a **function declaration** named `multiply` that takes two numbers and returns their product.
    
2.  Write the exact same logic using a **function expression** and store it in a variable named `multiplyExp`.
    
3.  Call both functions with some numbers and `console.log()` the results.
    
4.  **The Hoisting Test:** Try moving your `console.log(multiply(2, 3))` line *above* the function definition. Does it work? Now try moving the `console.log(multiplyExp(2, 3))` line above its definition. What error do you get?
    

### Now that you understand how to write and use functions, you're ready to explore :

*   **Arrow Functions** — A shorter, more modern way to write function expressions
    
*   **Loops and Iteration** — `for`, `while`, and iterating over data
    
*   **Arrays** — Storing lists of data and using loops to work with them
    

Happy coding! 🎉