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

When learning JavaScript, one of the first important concept we'll encounter is functions. Functions help us organize code, avoid repetition, and make program easier to maintain.

But soon you'll notice something interesting: there are two common ways to create functions.

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

At first they might look similar, but they behave differently in some situations.

Let's understand everything step-by-step.

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

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

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

Example without a function:

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

Now imagine doing this hundreds of times

Instead we write a function

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

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

Now the logic is written once and reused many times.

## Function Declaration

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

**Syntax:**

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

**Example:**

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

console.log(multiply(2, 4)); //8
```

Here:

*   `multiply` -> function name
    
*   `a, b` -> parameters
    
*   `return a * b` -> logic inside the function
    

This function can now be used anywhere in the program.

## Function Expression

A function expression stores a function inside a variable.

Instead of declaring it directly, we assign a function to a variable.

**Syntax:**

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

**Example:**

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

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

Here:

*   `multiply` is a variable
    
*   The function itself has no name (anonymous function)
    

## Side-by-Side Comparison

### Function Declaration

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

### Function Expression

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

Both do the same job, but they behave differently in certain cases.

### Key Difference

| **Feature** | **Function Declaration** | **Function Expression** |
| --- | --- | --- |
| Requires name | Yes | Usually stored in a variable |
| Hoisting | Fully hoisted | Not fully hoisted |
| When usable | Can be called before definition | Must be defined before calling |
| Common usage | utility functions | Callbacks, dynamic logic |

## The Basic Idea of Hoisting

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

Function declarations are hoisted but function expressions are not.

### Function Declaration and Hoisting

This works perfectly

```javascript
sayHello();

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

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

This happens because **function declarations are hoisted.**

### Function Expression and Hoisting

This will cause an error:

```javascript
sayHello();

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

Error occurs because the variable exists, but the function value isn't assigned yet.

So the rule is:

*   **Function declaration works before definition**
    
*   **Function expression do not.**
    

## When Should You Use Each?

**Use function declaration when:**

*   You want a simple reusable function
    
*   the function should be available throughout the file
    
*   Creating general reusable functions.
    

Example:

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

**Use function expression when:**

*   Assigning functions to variables
    
*   Passing functions as arguments
    
*   Working with callbacks
    

Example:

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

## Quick Summary

| **Feature** | **Function Declaration** | **Function Expression** |
| --- | --- | --- |
| Syntax | `function name(){}` | `const name = function() {}` |
| Hoisting | Yes | No |
| Requires Name | Yes | Optional |
| Use Case | General Functions | Callbacks and Dynamic logic |

## Assignment Practice

try it yourself first

**Task 1: Write a function declaration**

Create a function that multiplies two numbers.

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

**Task 2: Write the same logic using function expression**

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

**Task 3: Experiment using Hoisting**

Try calling both function before defining them

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

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

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

## Final Thoughts

Understanding the difference between function declaration and function expression helps you write more predictable JavaScript code.

Quick recap:

*   Functions are reusable block of code
    
*   Function declarations are hoisted
    
*   Function expression are not fully hoisted
    
*   Both are useful in different scenarios