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

Functions are one of the most important concepts in JavaScript. They help you organize your code and avoid repeating the same logic again and again.

In JavaScript, there are **multiple ways to create functions**, but two of the most common are:

*   **Function Declaration**
    
*   **Function Expression**
    

At first they may look similar, but there are some important differences. Let’s understand them step by step.

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

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

Instead of writing the same code many times, you can place that code inside a function and **reuse it whenever needed**.

For example, imagine you want to add two numbers multiple times in your program.

Without a function:

```plaintext
let result1 = 5 + 3;
let result2 = 10 + 4;
let result3 = 7 + 6;
```

This quickly becomes repetitive.

Using a function makes it cleaner:

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

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

Now the logic is written **once** and reused many times.

### 2\. Function Declaration Syntax

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

Example:

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

You can call the function like this:

```plaintext
console.log(greet("Aman"));
```

Output:

```plaintext
Hello Aman
```

In this case:

*   `greet` is the function name
    
*   `name` is the parameter
    
*   the function returns a greeting message
    

Function declarations are **very common and easy to read**.

### 3\. Function Expression Syntax

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

Example:

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

Calling the function works the same way:

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

Output:

```plaintext
Hello Rahul
```

Here:

*   `greet` is a variable
    
*   the function itself does not have a name (this is called an **anonymous function**)
    

The main difference is that the function is **treated like a value assigned to a variable**.

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

Let’s compare them side by side.

### Function Declaration

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

### Function Expression

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

Both can achieve the same result, but their **behavior in the code is slightly different**.

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

Hoisting is a JavaScript behavior where **some declarations are moved to the top of their scope before code execution**.

This mainly affects function declarations.

Example:

```plaintext
sayHello();

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

This works even though the function is called **before it appears in the code**.

Now look at a function expression.

```plaintext
sayHello();

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

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

So in simple terms:

*   **Function declarations can be used before they are defined**
    
*   **Function expressions cannot**
    

### 6\. When to Use Each Type

Both function declarations and expressions are useful, but developers often use them in different situations.

### Use Function Declaration When:

*   You want a clearly defined reusable function
    
*   The function should be accessible anywhere in the file
    
*   You want simple and readable structure
    

Example:

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

* * *

### Use Function Expression When:

*   You want to store a function in a variable
    
*   You want to pass a function as data
    
*   You want more control over when it becomes available
    

Example:

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