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

Functions are one of the most important concepts in **JavaScript**.

They allow developers to **reuse code** instead of writing the same logic multiple times.

For example, if we need to calculate something like addition or multiplication multiple times, we can create a **function** and call it whenever needed.

* * *

# What Are Functions?

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

Example:

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

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

Output:

```plaintext
8
```

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

* * *

# Function Declaration

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

### Syntax

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

### Example

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

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

Output

```plaintext
20
```

This is the **traditional and commonly used way** to define functions.

* * *

# Function Expression

A **function expression** is when a function is **stored inside 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
```

Here the function is **assigned to 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 produce the **same output**, but they behave slightly differently.

* * *

# Basic Idea of Hoisting

In JavaScript, some declarations are **moved to the top of their scope during execution**.  
This behavior is called **hoisting**.

* * *

### Function Declaration (Hoisted)

You can call the function **before it is defined**.

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

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

Output

```plaintext
5
```

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

* * *

### Function Expression (Not Hoisted)

Calling it before definition causes an error.

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

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

This will cause an error because the variable is **not initialized yet**.

* * *

# Key Differences

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Syntax | Uses `function` keyword | Function stored in variable |
| Hoisting | Yes | No |
| Call before definition | Works | Causes error |
| Usage | General functions | Callbacks, dynamic functions |

* * *

# When to Use Each Type

### Use Function Declaration

*   For **general reusable functions**
    
*   When you want the function available anywhere in the file
    

Example:

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

* * *

### Use Function Expression

*   When assigning functions to variables
    
*   When passing functions as arguments
    

Example:

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

* * *

# Assignment Practice

## Function Declaration

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

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

Output

```plaintext
12
```

* * *

# Function Expression

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

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

Output

```plaintext
12
```

* * *

# Try Calling Before Definition

### Declaration (Works)

```javascript
console.log(square(4));

function square(num){
  return num * num;
}
```

* * *

### Expression (Error)

```javascript
console.log(square(4));

const square = function(num){
  return num * num;
};
```

This will produce an **error because function expressions are not hoisted**.

* * *