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

Hey Everyone,

In this blog, we will learn about Function Declaration vs Function Expression in JavaScipt.

Functions are one of the most important concepts in JavaScript. They help us **reuse code**, organize logic, and make programs easier to manage.

* * *

### What Are Functions?

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

Instead of writing the same code again and again, we can wrap it inside a function and reuse it.

Example:

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

console.log(add(2, 3));
```

Output:

```plaintext
5
```

Here, the function **adds two numbers** and returns the result.

Functions help keep code **clean, organized, and reusable**.

* * *

### Function Declaration

A **function declaration** defines a function using the `function` keyword followed by a function name.

Syntax:

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

Example:

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

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

Output:

```plaintext
20
```

Here:

*   `multiply` is the function name
    
*   `a` and `b` are parameters
    
*   The function returns the product
    

* * *

### Function Expression

A **function expression** means assigning a function to a variable.

Syntax:

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

Example:

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

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

Output:

```plaintext
20
```

The function works the same way, but here the function is **stored inside a variable**.

* * *

### Declaration vs Expression (Side-by-Side)

Function Declaration:

```javascript
function greet(name) {
  return "Hello " + name;
}
```

Function Expression:

```javascript
const greet = function(name) {
  return "Hello " + name;
};
```

Both functions behave similarly when called.

Example:

```javascript
console.log(greet("Rahul"));
```

Output:

```plaintext
Hello Rahul
```

* * *

### Key Differences

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Definition | Defined using `function` keyword | Stored inside a variable |
| Hoisting | Fully hoisted | Not fully hoisted |
| Usage | Can be called before definition | Must be defined before calling |
| Syntax | `function add(){}` | `const add = function(){}` |

* * *

### Understanding Hoisting (Simple Explanation)

**Hoisting** means JavaScript moves certain declarations to the top during execution.

Let’s see an example.

### Function Declaration

```javascript
console.log(add(2,3));

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

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

Output:

```plaintext
5
```

* * *

### Function Expression

```javascript
console.log(add(2,3));

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

This will cause an error because the function **is not available before it is defined**.

Why?

Because the variable `add` is declared first but the function assignment happens later.

* * *

### Simple Execution Flow

Function Declaration:

```plaintext
JS reads file
↓
Function is hoisted
↓
Function call works
```

Function Expression:

```plaintext
JS reads file
↓
Variable created
↓
Function assigned later
↓
Calling before assignment causes error
```

* * *

### When Should You Use Each?

Use Function Declaration When

*   You want a **simple reusable function**
    
*   The function should be available **anywhere in the file**
    

Example:

```javascript
function calculateTotal(price, tax) {
  return price + tax;
}
```

* * *

### Use Function Expression When

*   You want to store a function in a variable
    
*   You want to pass functions as arguments
    
*   You want better control over scope
    

Example:

```javascript
const greet = function(name) {
  return "Hello " + name;
};
```

Many modern JavaScript patterns prefer expressions because they work well with **callbacks and functional programming**.

* * *

### Practice Assignment

Try this in your browser console.

### 1\. Function Declaration

Write a function that multiplies two numbers.

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

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

* * *

### 2\. Function Expression

Write the same logic using a function expression.

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

console.log(multiplyExp(3,4));
```

* * *

### 3\. Experiment With Hoisting

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

Observe:

*   Function declaration works
    
*   Function expression throws an error
    

This experiment helps you understand **how JavaScript executes code**.

* * *

And now, you know what Function Declaration vs Function Expression is.

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!