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

# JavaScript Functions: Declaration vs Expression (Beginner Guide)

Functions are one of the most important concepts in JavaScript.  
They help us **write reusable blocks of code** so we don’t repeat the same logic again and again.

In this guide we will learn:

*   What functions are
    
*   Function declaration syntax
    
*   Function expression syntax
    
*   Differences between declaration and expression
    
*   Basic idea of **hoisting**
    
*   When to use each type
    

* * *

# 1\. What Are Functions?

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

Example problem:

```plaintext
console.log(2 + 3);
console.log(4 + 5);
console.log(10 + 20);
```

If we need addition many times, repeating logic becomes messy.

Instead we create a function:

```plaintext
function add(a, b) {
return a + b;
}
console.log(add(2,3));
console.log(add(4,5));
```

Now the logic exists **in one place** and can be reused anywhere.

This improves:

*   readability
    
*   maintainability
    
*   code reuse
    

* * *

# 2\. Function Declaration Syntax

A **function declaration** defines a function using the function keyword followed by a name. ([w3schools.com](http://w3schools.com))

Example:

```plaintext
function multiply(a, b) {
  return a * b;
}
console.log(multiply(4,5));
```

Structure:

```plaintext
function functionName(parameters) {
code

}
```

Explanation:

*   function → keyword
    
*   multiply → function name
    
*   (a,b) → parameters
    
*   {} → function body
    

* * *

# 3\. Function Expression Syntax

A **function expression** creates a function and stores it inside a variable. ([w3schools.com](http://w3schools.com))

Example:

```plaintext
const multiply = function(a, b) {
 return a * b;
};
console.log(multiply(4,5));
```

Structure:

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

Here:

```plaintext
multiply → variable name
function(...) → function value
```

Functions in JavaScript are **treated like values**, so they can be stored in variables.

* * *

# Side-by-Side Comparison

### Function Declaration

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

### Function Expression

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

Both do the **same work**, but are written differently.

* * *

# 4\. Key Differences: Declaration vs Expression

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p>Feature</p></td><td colspan="1" rowspan="1"><p>Function Declaration</p></td><td colspan="1" rowspan="1"><p>Function Expression</p></td></tr><tr><td colspan="1" rowspan="1"><p>Name</p></td><td colspan="1" rowspan="1"><p>Required</p></td><td colspan="1" rowspan="1"><p>Often anonymous</p></td></tr><tr><td colspan="1" rowspan="1"><p>Stored in variable</p></td><td colspan="1" rowspan="1"><p>No</p></td><td colspan="1" rowspan="1"><p>Yes</p></td></tr><tr><td colspan="1" rowspan="1"><p>Hoisting</p></td><td colspan="1" rowspan="1"><p>Yes</p></td><td colspan="1" rowspan="1"><p>No</p></td></tr><tr><td colspan="1" rowspan="1"><p>When usable</p></td><td colspan="1" rowspan="1"><p>Before or after definition</p></td><td colspan="1" rowspan="1"><p>Only after definition</p></td></tr></tbody></table>

Function declarations are **hoisted**, while function expressions are not. ([The Tech Platform](https://www.thetechplatform.com/post/what-is-function-declaration-and-function-expression-in-javascript-how-to-use-them?utm_source=chatgpt.com))

* * *

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

JavaScript reads your code **before running it**.

During this phase, some declarations are moved to the top of their scope — this behavior is called **hoisting**. ([MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting?utm_source=chatgpt.com))

### Example: Function Declaration

```plaintext
sayHello();

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

This works because the function declaration is **hoisted to the top**. ([Colin.js](https://colinchjs.github.io/2023-09-20/09-00-01-724971-function-expression-vs-function-declaration-hoisting-in-javascript/?utm_source=chatgpt.com))

* * *

### Example: Function Expression

```plaintext
sayHello();

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

This **throws an error**.

Why?

Because the function expression is created **only when the program reaches that line**. ([Colin.js](https://colinchjs.github.io/2023-09-20/09-00-01-724971-function-expression-vs-function-declaration-hoisting-in-javascript/?utm_source=chatgpt.com))

* * *

# Simple Execution Flow

### Function Declaration

```plaintext
1. JS reads file
2. Function is hoisted
3. Function can run anywhere
```

### Function Expression

```plaintext
1. JS reads file
2. Variable exists
3. Function assigned later
4. Cannot call before assignment
```

* * *

# 6\. When to Use Each Type

### Use Function Declaration when:

*   Function should be available everywhere
    
*   Function is reusable across the file
    
*   Code readability is important
    

Example:

```plaintext
function calculateTotal() {}
```

* * *

### Use Function Expression when:

*   Function is used only in one place
    
*   Function is used as a callback
    
*   You want controlled execution
    

Example:

```plaintext
const handleClick = function() {};
```

* * *

# Quick Summary

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p>Concept</p></td><td colspan="1" rowspan="1"><p>Meaning</p></td></tr><tr><td colspan="1" rowspan="1"><p>Function</p></td><td colspan="1" rowspan="1"><p>Reusable block of code</p></td></tr><tr><td colspan="1" rowspan="1"><p>Function Declaration</p></td><td colspan="1" rowspan="1"><p>Defined with function name()</p></td></tr><tr><td colspan="1" rowspan="1"><p>Function Expression</p></td><td colspan="1" rowspan="1"><p>Function stored in variable</p></td></tr><tr><td colspan="1" rowspan="1"><p>Hoisting</p></td><td colspan="1" rowspan="1"><p>Declarations moved to top during execution</p></td></tr></tbody></table>

* * *

💡 **Mental model**

```plaintext
Function Declaration → available everywhere
```

Function Expression → available after definition