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

JavaScript functions are one of the most important building blocks in programming. Whether you're building a simple script or a full web application, functions help organize and reuse code efficiently.

In this article, we’ll explore:

*   What functions are and why we need them
    
*   Function declaration syntax
    
*   Function expression syntax
    
*   The key differences between them
    
*   A simple explanation of hoisting
    
*   When you should use each approach
    

Let’s start with the basics.

# What Are Functions in JavaScript?

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 place that code inside a function and call it whenever we need it.

Think of a function like a **recipe**.  
Once the recipe is written, you can follow it anytime to get the same result.

For example, imagine we want to add two numbers multiple times:

```javascript
console.log(2 + 3);
console.log(4 + 6);
console.log(7 + 8);
```

This works, but it quickly becomes repetitive.

Instead, we can create a function that performs the addition for us.

Functions make code:

*   More organized
    
*   Easier to reuse
    
*   Easier to maintain
    

Now let's look at the first way to create a function in JavaScript.

# Function Declaration Syntax

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

### Syntax

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

### Example

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

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

Output:

```plaintext
5
```

### How it works

1.  The function is declared using the `function` keyword.
    
2.  The function name is `add`.
    
3.  The parameters `a` and `b` receive input values.
    
4.  The function returns the result of adding the two numbers.
    

Function declarations are **straightforward and easy to read**, which makes them popular for defining reusable logic.

# Function Expression Syntax

A **function expression** is when a function is assigned to a variable.

Instead of defining the function directly, we store it inside a variable.

### Syntax

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

### Example

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

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

Output:

```plaintext
9
```

### How it works

*   A variable named `add` is created.
    
*   A function is assigned to that variable.
    
*   We can call the function using the variable name.
    

Function expressions are commonly used in modern JavaScript, especially when working with callbacks and functional programming patterns.

# Function Declaration vs Function Expression

Both approaches create functions, but they behave slightly differently.

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Syntax | Defined using `function name()` | Function stored inside a variable |
| Hoisting | Fully hoisted | Not fully hoisted |
| Calling before definition | Works | Causes an error |
| Common use | Defining reusable logic | Callbacks, dynamic functions |

### Example Comparison

Function Declaration:

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

Function Expression:

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

Both functions do the same thing, but their behavior differs when it comes to **hoisting**.

# A Quick Look at Hoisting

Hoisting is a JavaScript behavior where **function and variable declarations are moved to the top of their scope during execution**.

You don't need to understand execution context in depth yet. Just remember how it affects function types.

## Function Declaration and Hoisting

Function declarations are **fully hoisted**, meaning they can be called before they appear in the code.

Example:

```javascript
sayHello();

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

This works because JavaScript loads the function declaration before running the code.

## Function Expression and Hoisting

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

Example:

```javascript
sayHello();

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

This will cause an error:

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

Because the variable exists but the function has not been assigned yet.

# When Should You Use Each?

Both function declarations and function expressions are useful depending on the situation.

### Use Function Declarations When:

*   You want clearly defined reusable functions
    
*   You want to call the function anywhere in the file
    
*   You're writing simple utility functions
    

Example:

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

### Use Function Expressions When:

*   Assigning functions to variables
    
*   Working with callbacks
    
*   Creating functions conditionally
    
*   Using modern JavaScript patterns
    

Example:

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

In modern JavaScript, function expressions are often replaced with **arrow functions**, but the concept is still important to understand.

# Hands-On Example

Let’s implement the same logic using both approaches.

### Function Declaration

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

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

Output:

```plaintext
12
```

### Function Expression

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

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

Output:

```plaintext
12
```

Both functions perform the same task, but their **definition style and hoisting behavior differ**.

You can also experiment by calling the functions **before defining them** to see how JavaScript handles each case.

# Final Thoughts

Functions are a core part of JavaScript and help make code reusable and organized.

In this article, we learned:

*   Functions are reusable blocks of code
    
*   JavaScript provides multiple ways to define functions
    
*   **Function declarations** are hoisted and can be called before they appear in code
    
*   **Function expressions** are assigned to variables and cannot be called before initialization
    

Understanding the difference between these two approaches will help you write clearer and more predictable JavaScript code.

As you continue learning JavaScript, you'll also encounter **arrow functions**, which are a more modern way of writing function expressions.

But mastering the fundamentals first will make everything else much easier.