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

# Introduction

Functions are one of the most fundamental building blocks in JavaScript. Almost every program, whether small or large, uses functions to organize logic and perform tasks efficiently.

When developers write programs, they often encounter repetitive tasks. For example:

*   adding numbers
    
*   validating user input
    
*   formatting text
    
*   calculating totals
    

Instead of writing the same code repeatedly, developers create **functions**. Functions allow us to write a block of code once and reuse it whenever needed.

JavaScript provides multiple ways to define functions, but two of the most common approaches are:

*   **Function Declarations**
    
*   **Function Expressions**
    

Although both approaches create functions, they behave slightly differently, especially when it comes to **hoisting and execution order**.

In this article, we will explore:

*   What functions are and why we need them
    
*   Function declaration syntax
    
*   Function expression syntax
    
*   Key differences between declaration and expression
    
*   A beginner-friendly explanation of hoisting
    
*   When to use each type
    

By the end of this article, you will clearly understand the differences between **function declarations and function expressions in JavaScript**.

# What Are Functions?

A **function** is a reusable block of code designed to perform a specific task.

Instead of repeating the same instructions multiple times, a function allows developers to **write code once and execute it whenever needed**.

For example, imagine we want to calculate the sum of two numbers multiple times in a program.

Without functions:

```javascript
let result1 = 5 + 3;
let result2 = 10 + 6;
let result3 = 7 + 9;
```

This approach works but quickly becomes inefficient.

Using a function simplifies the process.

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

console.log(add(5, 3));
console.log(add(10, 6));
console.log(add(7, 9));
```

Output

```plaintext
8
16
16
```

Here, the `add()` function can be reused multiple times with different inputs.

Functions improve:

*   code readability
    
*   code reusability
    
*   maintainability
    

![Image](https://cdn.prod.website-files.com/63dea6cb95e58cb38bb98cbd/6415d9ed507092be328f9eee_5eea6339546516d0467141fa_BVLCVC1PtL8AMngFb0-w7kOX354E0cB3eifMvV1l9W5EdQvnZOaEtMaEJym5KB5eHZJpanZReTlvg-Vfiur3N7L9YQb75p2ALr4AnY86gq-cUaqCY6NSiOYS8Jj_lt03RjBayBSG.png align="center")

![Image](https://www.researchgate.net/publication/356488506/figure/fig3/AS%3A1094944114655232%401638066428441/Flowchart-of-the-JavaScript-code.ppm align="center")

Functions generally follow a simple process:

Input → Process → Output

# Function Declaration Syntax

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

### Syntax

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

Example:

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

greet("Rajarshi");
```

Output

```plaintext
Hello Rajarshi
```

Explanation:

*   `function` keyword declares a function
    
*   `greet` is the function name
    
*   `name` is the parameter
    
*   the code inside `{}` runs when the function is called
    

Calling the function executes the instructions defined inside it.

# Example: Addition Function

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

let result = addNumbers(10, 5);

console.log(result);
```

Output

```plaintext
15
```

Here:

*   `a` and `b` are parameters
    
*   `return` sends the result back to where the function was called
    

Function declarations are the **most common and beginner-friendly way to create functions**.

# Function Expression Syntax

A **function expression** defines a function and assigns it to a variable.

Instead of declaring the function separately, the function becomes a **value stored in a variable**.

### Syntax

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

Example:

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

greet("Rajarshi");
```

Output

```plaintext
Hello Rajarshi
```

Here:

*   the function is stored inside the variable `greet`
    
*   calling the variable executes the function
    

Function expressions are commonly used in **modern JavaScript applications**.

# Example: Addition Using Function Expression

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

console.log(addNumbers(10, 5));
```

Output

```plaintext
15
```

The logic is exactly the same as the function declaration version. The only difference is **how the function is defined**.

# Side-by-Side Comparison

### Function Declaration

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

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

### Function Expression

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

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

Both versions produce the same output.

```plaintext
20
```

However, their behavior differs when it comes to **hoisting**.

![Image](https://miro.medium.com/1%2AeZlrQJ8B7ObYrAJjUBW8GA.png align="center")

# Understanding Hoisting (Beginner-Friendly)

Hoisting is a concept in JavaScript where certain declarations are **moved to the top of their scope during execution**.

This means some functions or variables can be used **before they appear in the code**.

Function declarations support hoisting.

Function expressions do not.

# Hoisting with Function Declaration

Example:

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

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

Output

```plaintext
7
```

Even though the function appears **after the call**, the program still works.

This happens because JavaScript **hoists function declarations** to the top during execution.

# Hoisting with Function Expression

Now consider this example:

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

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

Output

```plaintext
Error: Cannot access 'add' before initialization
```

Why does this happen?

Because the variable `add` exists but the function is **not assigned yet** when the call occurs.

Therefore, function expressions **cannot be used before definition**.

![Image](https://miro.medium.com/1%2AmoaAsvvKS0EQG-yvodi2aA.png align="center")

# Key Differences Between Declaration and Expression

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Definition | Uses `function` keyword with name | Function stored in variable |
| Hoisting | Fully hoisted | Not hoisted |
| Usage before definition | Allowed | Not allowed |
| Syntax style | Traditional | More flexible |

Understanding these differences helps developers **choose the correct approach in different situations**.

# When to Use Function Declaration

Function declarations are ideal when:

*   defining reusable utility functions
    
*   writing simple standalone functions
    
*   building beginner-friendly code
    

Example:

```javascript
function calculateArea(width, height) {
  return width * height;
}
```

Because they are hoisted, declarations can be used **before they appear in the code**.

# When to Use Function Expression

Function expressions are commonly used when:

*   assigning functions to variables
    
*   using functions as arguments
    
*   creating callbacks
    
*   writing modular code
    

Example:

```javascript
const calculateArea = function(width, height) {
  return width * height;
};
```

Function expressions also integrate well with **modern JavaScript patterns**.

# Assignment Implementation

Let’s implement the assignment step by step.

# Step 1: Function Declaration for Multiplication

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

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

Output

```plaintext
24
```

# Step 2: Function Expression for Multiplication

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

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

Output

```plaintext
24
```

Both approaches achieve the same result.

# Step 3: Calling Functions Before Definition

### Function Declaration

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

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

Output

```plaintext
6
```

This works because the function declaration is **hoisted**.

### Function Expression

```javascript
console.log(multiplyExp(2, 3));

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

Output

```plaintext
Error
```

This fails because the function expression is **not hoisted**.

# Real-World Importance of Functions

Functions play a crucial role in modern programming.

They are used extensively in:

Web development

*   handling form submissions
    
*   processing user input
    
*   performing calculations
    

Server-side applications

*   processing requests
    
*   interacting with databases
    

Data processing

*   transforming datasets
    
*   filtering results
    

Functions enable developers to create **modular and reusable code structures**.

![Image](https://camo.githubusercontent.com/62cf3b1249cb16e770ea25bb3e7a12925f50065e8aa4bd0b26e805b2a10b7689/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f6d61782f313336302f302a37513379765349765f7430696f4a2d5a2e676966 align="center")

# Best Practices When Working with Functions

Use descriptive function names.

Example:

```javascript
function calculateTotalPrice() {}
```

Avoid unclear names like:

```javascript
function doSomething() {}
```

Keep functions small and focused on a single task.

Example:

```plaintext
calculateTax()
calculateDiscount()
calculateTotal()
```

This improves readability and maintainability.

# Key Takeaways

Functions allow developers to **organize code into reusable blocks**.

Important concepts covered in this article include:

*   Functions perform reusable tasks
    
*   Function declarations define named functions using the `function` keyword
    
*   Function expressions store functions inside variables
    
*   Function declarations support hoisting
    
*   Function expressions do not support hoisting
    
*   Both approaches allow developers to write modular code
    

Understanding these differences helps developers write **cleaner and more efficient JavaScript programs**.

Functions are a foundational concept that supports advanced topics such as:

*   arrow functions
    
*   callbacks
    
*   asynchronous programming
    
*   functional programming patterns
    

Mastering functions is therefore an essential step toward becoming a **skilled JavaScript developer**.