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

When learning JavaScript, one of the first things you encounter is **functions**. Functions are everywhere in programming, and once you understand them well, writing code becomes much easier and cleaner.

But JavaScript gives us **multiple ways to create functions**. Two very common ones are:

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

They might look similar at first, but there are some important differences between them.

Let’s break it down step by step.

* * *

# What Are Functions and Why Do We Need Them?

![](https://cdn.hashnode.com/uploads/covers/696a3cd3f0b435e59823a2c4/9091283c-89bb-4e91-b5a7-4a588571a87b.png align="center")

In simple words, a **function is a reusable block of code** designed to perform a specific task.

Instead of writing the same code again and again, we can **wrap it inside a function and reuse it whenever needed**.

Think of it like a **machine**:

Input → Function → Output

For example, imagine you want to add two numbers multiple times in your program. Instead of repeating the addition code everywhere, you can create a function.

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

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

Here:

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

Functions make code:

*   easier to reuse
    
*   easier to read
    
*   easier to maintain
    

* * *

# Function Declaration

![](https://cdn.hashnode.com/uploads/covers/696a3cd3f0b435e59823a2c4/66475c9f-0275-4e91-bc53-733700919f6c.png align="center")

A **function declaration** is the most traditional way of creating a function in JavaScript.

### Syntax

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

### Example

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

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

In this example:

*   `multiply` is the function name
    
*   `a` and `b` are parameters
    
*   the function returns the multiplication result
    

Function declarations are straightforward and commonly used when defining functions in a program.

* * *

# Function Expression

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

### Syntax

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

### Example

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

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

Here:

*   The function **does not have to be named**
    
*   It is assigned to the variable `multiply`
    
*   We call it using the variable name
    

Function expressions are very common when working with **callbacks, event handlers, and modern JavaScript patterns**.

* * *

# Key Differences Between Function Declaration and Function Expression

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Definition style | Declared using `function` keyword | Function stored in a variable |
| Naming | Must have a name | Can be anonymous |
| Hoisting | Fully hoisted | Not fully hoisted |
| Usage | Used for general reusable functions | Often used in callbacks or dynamic code |

Example comparison:

### Function Declaration

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

### Function Expression

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

Both work the same when called, but behave differently in terms of **hoisting**.

* * *

# Understanding Hoisting (Simple Explanation)

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

This affects function declarations and expressions differently.

* * *

## Function Declaration Hoisting

You can call the function **before it appears in the code**.

```javascript
sayHello();

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

This works because **JavaScript hoists the function declaration**.

* * *

## Function Expression Hoisting

Calling a function expression before it is defined will cause an error.

```javascript
sayHello();

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

This produces an error because:

*   The variable exists
    
*   But the function is **not assigned yet**
    

So JavaScript cannot execute it.

* * *

# When Should You Use Each Type?

Both are useful depending on the situation.

### Use Function Declarations When:

*   Defining general reusable functions
    
*   Writing simple programs
    
*   You want hoisting behavior
    

Example:

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

* * *

### Use Function Expressions When:

*   Assigning functions to variables
    
*   Working with callbacks
    
*   Writing modern JavaScript patterns
    

Example:

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

In many modern JavaScript projects, **function expressions and arrow functions are commonly used**.

* * *

# Assignment Practice

Try this small exercise.

### 1\. Function Declaration

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

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

* * *

### 2\. Function Expression

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

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

* * *

### 3\. Experiment With Hoisting

Try calling both functions **before defining them** and observe what happens.

You will notice:

*   Function declarations still work
    
*   Function expressions throw an error
    

This small experiment helps understand **hoisting behavior in JavaScript**.

* * *

# Final Thoughts

Functions are one of the **most important building blocks in JavaScript**. Understanding the difference between **function declarations and function expressions** helps you write cleaner and more predictable code.

To summarize:

*   Functions help **reuse code**
    
*   Function declarations are **hoisted**
    
*   Function expressions are **not fully hoisted**
    
*   Both are useful depending on the situation
    

As you continue learning JavaScript, you'll also come across **arrow functions**, which are another modern way to write functions.

But mastering these basics is the first step.