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

JavaScript functions are one of the most powerful features of the language. They help developers write **clean, reusable, and modular code**.

If you are starting your journey in JavaScript, one important concept to understand is the difference between **Function Declarations** and **Function Expressions**.

Let’s break it down step by step.

* * *

# 1\. What Are Functions and Why Do We Need Them?

A **function** is a reusable block of code designed to perform a specific task.

Instead of writing the same logic repeatedly, we create a function and call it whenever needed.

### Example Problem

Imagine we want to add two numbers multiple times.

Without a function:

```plaintext
let result1 = 2 + 3;
let result2 = 5 + 7;
let result3 = 10 + 20;
```

This becomes repetitive and messy.

Using a function:

```plaintext
function add(a, b) {
  return a + b;
}

console.log(add(2,3));
console.log(add(5,7));
console.log(add(10,20));
```

Now our code is **clean, reusable, and easier to maintain**.

* * *

# 2\. Function Declaration Syntax

A **function declaration** defines a named function using the `function` keyword.

### Syntax

```plaintext
function functionName(parameters) {
  // code to execute
}
```

### Example

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

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

Here:

*   `multiply` is the function name
    
*   `a` and `b` are parameters
    
*   `return` sends the result back
    

* * *

# 3\. Function Expression Syntax

A **function expression** is when a function is stored inside a variable.

### Syntax

```plaintext
const variableName = function(parameters) {
  // code to execute
};
```

### Example

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

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

Here the function **does not exist independently**, it is **assigned to a variable**.

* * *

# 4\. Key Differences Between Function Declaration and Function Expression

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Definition | Declared using `function name()` | Stored inside a variable |
| Hoisting | Fully hoisted | Not fully hoisted |
| Usage before definition | Works | Causes error |
| Naming | Must have a name | Can be anonymous |
| Flexibility | Less flexible | Useful in callbacks and dynamic logic |

* * *

# 5\. Basic Idea of Hoisting (Simple Explanation)

**Hoisting** means JavaScript moves certain declarations to the **top of the scope before execution**.

### Function Declaration Example

```plaintext
greet();

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

This works because **function declarations are hoisted**.

* * *

### Function Expression Example

```plaintext
greet();

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

This gives an error:

```plaintext
ReferenceError: Cannot access 'greet' before initialization
```

Because **function expressions are not fully hoisted**.

* * *

# 6\. When Should You Use Each?

### Use Function Declaration When

*   You want **simple reusable functions**
    
*   Function should be accessible **anywhere in the scope**
    
*   You want cleaner structure for utility functions
    

Example:

```plaintext
function calculateArea(radius){
  return Math.PI * radius * radius;
}
```

* * *

### Use Function Expression When

*   Assigning functions to variables
    
*   Using **callbacks**
    
*   Working with **event handlers**
    
*   Creating **closures**
    

Example:

```plaintext
button.addEventListener("click", function(){
  console.log("Button clicked!");
});
```

* * *

# 7\. Assignment Example

### Function Declaration

```plaintext
console.log(multiplyDecl(3,4));

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

Output:

```plaintext
12
```

* * *

### Function Expression

```plaintext
console.log(multiplyExpr(3,4));

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

Output:

```plaintext
Error: Cannot access 'multiplyExpr' before initialization
```

* * *

# 8\. Simple Execution Flow

```plaintext
Program Starts
     ↓
Function Declaration Hoisted
     ↓
Code Executes
     ↓
Function Expression Assigned
     ↓
Functions Can Now Be Called
```

* * *

# Final Thoughts

Both **function declarations** and **function expressions** are fundamental tools in JavaScript.

Understanding their differences helps you write **cleaner, predictable, and professional code**.

Quick takeaway:

*   **Function Declarations → simple reusable functions**
    
*   **Function Expressions → dynamic and flexible functions**
    

Mastering these concepts is an important step toward becoming a **strong JavaScript developer**.