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

When writing JavaScript programs, we often need to **reuse code multiple times**. Instead of writing the same code again and again, we can use **functions**.

Functions help us organize code and make programs easier to maintain.

In this article, we will understand:

*   What functions are
    
*   Function declaration
    
*   Function expression
    
*   Key differences between them
    
*   A simple idea of **hoisting**
    

## What Are Functions and Why Do We Need Them?

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

Example: Adding two numbers.

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

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

Output

```plaintext
8
```

Instead of writing the same logic many times, we can simply call the function whenever needed.

## Function Declaration

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

### Syntax

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

### Example

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

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

Output

```plaintext
Hello Ram
```

Here:

*   `greet` is the function name
    
*   `"Ram"` is the argument passed to the function
    

## Function Expression

A **function expression** stores a function inside a variable.

### Syntax

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

### Example

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

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

Output

```plaintext
Hello Ram
```

The function works the same way, but it is **assigned to a variable**.

## Function Declaration vs Function Expression

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Syntax | Uses `function name()` | Function stored in variable |
| Hoisting | Works before definition | Cannot call before definition |
| Naming | Must have a name | Can be anonymous |
| Usage | Common for general functions | Often used with callbacks |

Example comparison:

### Function Declaration

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

### Function Expression

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

Both perform the same task.

## Basic Idea of Hoisting

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

### Example with Function Declaration

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

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

Output

```plaintext
5
```

Even though the function is defined **after the call**, it still works.

### Example with Function Expression

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

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

This will produce an **error**.

Why?

Because the variable `add` is not initialized when the function is called.

## When to Use Each Type

### Use Function Declaration When

*   Creating general reusable functions
    
*   The function needs to be accessible anywhere in the file
    

### Use Function Expression When

*   Assigning functions to variables
    
*   Using functions inside callbacks
    
*   Writing modular or functional-style code
    

Both are useful depending on the situation.

## Example

### Function Declaration

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

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

Output

```plaintext
20
```

### Function Expression

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

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

Output

```plaintext
20
```

### Calling Before Definition

Function Declaration:

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

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

Works correctly.

Function Expression:

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

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

This will give an **error**.

## Conclusion

Functions are essential in JavaScript because they help us write **reusable and organized code**.

Key points to remember:

*   A **function declaration** defines a named function using the `function` keyword
    
*   A **function expression** stores a function inside a variable
    
*   Function declarations support **hoisting**
    
*   Function expressions do **not work before definition**
    

Understanding this difference helps developers write **cleaner and more predictable JavaScript code**.