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

JavaScript is full of small concepts that seem simple at first but understanding them deeply makes you a **better developer**. So dig into JavaScript.

One such concept is the difference between:

*   **Function Declaration**
    
*   **Function Expression**
    

Many beginners think they are the same.  
Technically they both create functions but **their behaviour inside JavaScript is different**, especially because of something called **hoisting**.

So in this article, we’ll explore this step-by-step in a simple developer-friendly story.

## Why Do We Need Functions?

Before comparing types, let's quickly understand **what functions are**.

A **function** is simply a **reusable block of code** that performs a task.

Instead of writing the same code again and again, we put it inside a function and reuse it whenever needed.

Example: adding two numbers.

```javascript
function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 8
```

Here:

*   `add` is the **function name**
    
*   `a` and `b` are **parameters**
    
*   the function **returns the result**
    

Functions help us:

*   avoid repeating code
    
*   organize logic
    
*   make programs easier to maintain
    

Now let’s move toward our main topic.

## Function Declaration

A **Function Declaration** defines a function using the `function` keyword followed by a **name of function**.

**Syntax**

```javascript
function functionName(parameters) {
  // code
}
```

**Example**

```javascript
function add(a, b) {
  return a + b;
}
console.log(add(2, 3));
```

**Output**

```plaintext
5
```

In this example:

*   `add` is declared using the **function declaration syntax**
    
*   JavaScript registers this function during the **initial code parsing phase**
    

Because of this behaviour, **function declarations are hoisted**.

We’ll understand hoisting soon.

## Function Expression

A **Function Expression** creates a function and **stores it inside a variable**.

**Syntax**

```javascript
const functionName = function(parameters) {
  // code
}
```

**Example**

```javascript
const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3));
```

Output

```plaintext
5
```

Here something important happens:

The function itself **does not have to be named**.

This type of function is called an **anonymous function**.

Example:

```javascript
const greet = function() {
  console.log("Hello Developer!");
};
greet();
```

## Declaration vs Expression

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Syntax | `function add(){}` | `const add = function(){}` |
| Hoisting | Fully hoisted | Not fully hoisted |
| Naming | Must have a name | Can be anonymous |
| Usage | Good for reusable utilities | Useful for callbacks and dynamic functions |
| Execution | Can be called before definition | Must be defined before calling |

## Understanding Hoisting

JavaScript does something interesting when it runs code.

Before executing the program, it **scans the file and registers function declarations**.

This behaviour is called **hoisting**.

Think of it like this:

> JavaScript lifts function declarations to the top of the file during setup.

### Example: Function Declaration Hoisting

```javascript
console.log(add(2, 3));
function add(a, b) {
  return a + b;
}
```

Output

```plaintext
5
```

Even though we called the function **before defining it**, it still works.

**Why?** Because JavaScript already **knows about the function** during the initial phase.

### Example: Function Expression Behaviour

Now let's try the same thing with **function expression**.

```javascript
console.log(add(2, 3));
const add = function(a, b) {
  return a + b;
};
```

Output

```plaintext
ReferenceError
```

**Why?** Because only the **variable declaration is hoisted**, not the function assignment.

So JavaScript sees something like this internally:

```javascript
const add;
console.log(add(2,3)); // error
add = function(a,b){
 return a+b;
}
```

At the time of the function call, `add` is **not yet a function**.

## Visual Execution Flow

### Function Declaration

```plaintext
1. JS scans file
2. Registers function add()
3. Code execution starts
4. Function call works
```

### Function Expression

```plaintext
1. JS scans file
2. Variable add is created
3. Function not assigned yet
4. Calling it causes error
```

### When Should You Use Function Declaration?

Function declarations are useful when:

*   The function is **reusable**
    
*   It represents **core logic**
    
*   It will be used in many places
    

Example

```javascript
function calculateTax(price) {
  return price * 0.18;
}
```

### When Should You Use Function Expression?

Function expressions are common when:

*   Passing functions as **arguments**
    
*   Writing **callbacks**
    
*   Creating **dynamic behaviour**
    

Example

```javascript
setTimeout(function() {
  console.log("Executed later");
}, 1000);
```

Modern JavaScript frameworks like **React** heavily use **function expressions and arrow functions**.

## Real-World Developer Tip

Most professional codebases today use:

*   **function declarations for utilities**
    
*   **function expressions or arrow functions for components and callbacks**
    

Example from React:

```javascript
const Button = () => {
  return <button>Click</button>;
};
```

## Assignment for Practice

Try this exercise to understand the difference clearly.

### 1: Function Declaration

Write a function that multiplies two numbers.

```javascript
function multiply(a, b) {
  return a * b;
}

console.log(multiply(4, 5));
```

Output

```plaintext
20
```

### 2: Function Expression

Now write the same logic using a function expression.

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

console.log(multiply(4, 5));
```

### 3: Experiment With Hoisting

Try calling both functions **before defining them**.

Observe what happens.

Example:

```javascript
console.log(multiply(4, 5));

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

This will throw an error.

But with function declaration will work.

## Key Takeaways

*   Functions are **reusable blocks of code**
    
*   JavaScript provides multiple ways to create functions
    
*   **Function declarations are hoisted**
    
*   **Function expressions are not fully hoisted**
    
*   Declarations are good for reusable logic
    
*   Expressions are useful for callbacks and dynamic usage
    

Understanding this difference helps you write **cleaner and more predictable JavaScript code**.

## Summary

| Concept | Explanation |
| --- | --- |
| Function | Reusable block of code |
| Function Declaration | Named function defined using `function` keyword |
| Function Expression | Function stored inside a variable |
| Hoisting | JavaScript moves declarations during setup |
| Key Difference | Declaration works before definition, expression does not |

If you are learning JavaScript seriously, mastering these small concepts will slowly move you from **beginner developer → confident JavaScript developer**.

And remember:

> Great developers don't just write code they understand **how JavaScript thinks**.

> ***JavaScript becomes easier when you try things yourself.***

Thank you for reading this article.

If you found this helpful, feel free to connect with me on [**LinkedIn**](https://www.linkedin.com/in/devsantoshkumar/) and follow my journey as I continue sharing JavaScript and frontend concepts ([**more blogs**](https://devwithsantosh.hashnode.dev/)).