# Function Declaration vs Function Expression in JavaScript

Functions are one of the most important concepts in JavaScript. They allow us to write **reusable blocks of code** that can be executed whenever we need them.

Instead of repeating the same logic multiple times, we can place that logic inside a function and simply call it whenever required.

For example, imagine you need to add two numbers in multiple places in your program. Instead of rewriting the addition logic again and again, you can create a function once and reuse it.

* * *

# What is a Function?

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

It runs only when it is **called (invoked)**.

Example:

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

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

Here:

*   `add` is the function name
    
*   `a` and `b` are parameters
    
*   `return` gives back the result
    

* * *

# Function Declaration

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

### Syntax

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

### Example

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

console.log(greet("Sayantan"));
```

Output:

```plaintext
Hello Sayantan
```

### Key Characteristics

*   Defined using the `function` keyword
    
*   Must have a **name**
    
*   Can be called **before or after** its definition (because of hoisting)
    

* * *

# Function Expression

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

### Syntax

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

### Example

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

console.log(greet("Sayantan"));
```

Output:

```plaintext
Hello Sayantan
```

### Key Characteristics

*   Function is assigned to a variable
    
*   Can be **anonymous (no name)**
    
*   Cannot be called before it is defined
    

* * *

# Side-by-Side Comparison

### Function Declaration

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

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

### Function Expression

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

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

Both perform the **same task**, but they behave differently internally.

## Comparison table -

![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/128accfa-d23b-43e5-9c45-f4dd6bafd06e.png align="center")

* * *

# Hoisting (Simple Explanation)

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

### Function Declaration and Hoisting

Function declarations are **fully hoisted**.

This means we can call them **before they are written in the code**.

Example:

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

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

This works because JavaScript already knows about the function.

* * *

### Function Expression and Hoisting

Function expressions are **not hoisted in the same way**.

Example:

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

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

This will produce an error:

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

Because the variable `add` is not initialized yet.

![](https://cdn.hashnode.com/uploads/covers/69517129b3f42beb72514f64/a85251ec-2163-4b56-a1c5-96bb0e3c4613.png align="center")

* * *

# Key Differences

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Syntax | `function name() {}` | `const name = function() {}` |
| Hoisting | Fully hoisted | Not usable before definition |
| Naming | Must have a name | Can be anonymous |
| Usage | Good for general reusable functions | Useful for dynamic logic and callbacks |

* * *

# When Should You Use Each?

### Use Function Declarations when

*   Writing general reusable functions
    
*   You want the function available anywhere in the scope
    
*   Code readability is important
    

Example:

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

* * *

### Use Function Expressions when

*   Assigning functions to variables
    
*   Passing functions as arguments
    
*   Creating callbacks
    

Example:

```plaintext
const numbers = [1,2,3];

numbers.map(function(num) {
  return num * 2;
});
```

* * *

# Assignment Practice

### 1️⃣ Function Declaration

Write a function declaration that multiplies two numbers.

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

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

Output:

```plaintext
20
```

* * *

### 2️⃣ Function Expression

Write the same logic using a function expression.

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

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

Output:

```plaintext
20
```

* * *

### 3️⃣ Try Calling Before Definition

Try this experiment:

```plaintext
console.log(multiply(2,3));

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

This works.

But this will fail:

```plaintext
console.log(multiply(2,3));

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

Understanding this behavior helps explain **how JavaScript handles functions internally.**