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

## Why Do We Need Functions?

When writing JavaScript, you’ll often repeat the same logic multiple times. For example, imagine you frequently need to **add two numbers**.

Without functions, you might write something like this again and again:

```javascript
let result = 5 + 3;
console.log(result);
```

Now imagine you need to do this **20 times** in different parts of your program.

Instead of repeating the logic, we create a **function**.

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

Think of a function like a **machine**: you give it some input, it performs a task, and it returns an output.

Example:

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

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

Here, the function **add** takes two numbers and returns their sum. Instead of rewriting the logic, we just **call the function whenever needed**.

## Function Declaration

A **function declaration** is the most common way beginners learn to create functions.

### Syntax

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

Example: multiplying two numbers.

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

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

Here’s what’s happening:

*   `function` is the keyword used to define a function.
    
*   `multiply` is the name of the function.
    
*   `a` and `b` are parameters.
    
*   The function returns the result of `a * b`.
    

Once declared, this function can be used anywhere in your program.

## Function Expression

A **function expression** is another way to create functions. Instead of declaring a function directly, we **store the function inside a variable**.

### Syntax

```javascript
let variableName = function(parameters) {
  // code
};
```

Example using the same multiplication logic:

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

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

The result is the same, but the way the function is defined is slightly different.

Here:

*   A function is created.
    
*   That function is **assigned to the variable** `multiply`.
    

This means the variable now **holds the function**.

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

Let’s compare both approaches.

### Function Declaration

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

### Function Expression

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

Both functions work the same way when called:

```javascript
console.log(multiply(3, 4)); // 12
```

But there are some important differences between them.

## Key Differences

The biggest difference comes from how JavaScript **loads and executes code**.

### 1\. Hoisting Behavior

Function **declarations** are **hoisted**, but function **expressions are not**.

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

Let’s see what this means in practice.

## Calling a Function Before It Is Defined

### Example with Function Declaration

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

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

This works perfectly.

Output:

```javascript
12
```

Even though the function is written later in the code, JavaScript already knows about it because **function declarations are hoisted**.

### Example with Function Expression

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

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

This will cause an error.

Why?

Because the variable `multiply` does not contain the function yet when JavaScript tries to run the first line.

In simple terms:

*   **Function declaration → available before definition**
    
*   **Function expression → available only after assignment**
    

## When Should You Use Each?

Both approaches are useful, and developers use them for different reasons.

### Use Function Declarations When:

*   You want functions available anywhere in the file
    
*   The function represents a **core piece of logic**
    
*   You want simpler, cleaner syntax
    

Example:

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

### Use Function Expressions When:

*   You want to **store functions inside variables**
    
*   You want functions to behave like **values**
    
*   You plan to pass the function as an argument later
    

Example:

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

Function expressions are also common in **callbacks and modern JavaScript patterns**.