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

### **Topics to Cover**

1.  What functions are and why we need them
    
2.  Function declaration syntax
    
3.  Function expression syntax
    
4.  Key differences between declaration and expression
    
5.  Basic idea of hoisting (very high level)
    
6.  When to use each type
    

## What functions are and why we need them

Functions are reusable blocks of code, that we use to avoid writing repetitive code.

It is like having a worker who does the job automatically, when asked with certain input.

For example, in an Array of numbers, for every element you need to calculate the binary number, then instead of writing the code of converting number to binary again and again, we can just make a function that does this exact work, and return the value. In, this way, functions are like our go to buddies for any repetitive code.

1.  **Reusability:** Write once, use everywhere.
    
2.  **Organization:** Break complex logic into small, manageable chunks.
    
3.  **DRY (Don't Repeat Yourself):** If you're copy-pasting code, you probably need a function.
    

## Function declaration syntax

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

Functions are declared using function keyword. It may or may not accept a arguments, and it may or may not return a value.

Here, in this example, add is the name of function, we are just taking two parameters, a and b, and returning a+b.

## Function expression syntax

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

In JS, functions, are "First-Class Citizens", meaning, they can be treated as any other value, and can be assigned to a variable. This is Function Expression.

Function expressions can be used as a argument for another function

## Declaration vs Expression

| Aspect | Declaration | Expression |
| --- | --- | --- |
| Definition | Defined using `function name()` | Function stored in a variable |
| **Hoisting** | Declarations are **hoisted** | Expressions are **not hoisted** |
| **Execution** | Processed **before normal code execution** (depending on type) | **Evaluated when the code runs** |
| **Function form** | `function greet(){}` | `const greet = function(){}` |

## Hoisting

Hoisting means, before code execution, JS moves functions and variables, on top of code.

This allows us to use functions, even before they are reached in a program.

But for expressions, the variables are hoisted but do not take any function body with them, so they are undefined. That's why they can't be used before they are reached.

If using `var`:

```plaintext
var f = function(){}
```

`var f` becomes **undefined** during hoisting.

If using `const` or `let`:

It enters **Temporal Dead Zone**, so accessing it throws error.

## Usage

Use **function declarations** when:

*   you want hoisting
    
*   function is part of main program logic
    

Use **function expressions** when:

*   assigning function to variables
    
*   passing functions as arguments
    
*   closures
    
*   callbacks
    

You should try some examples yourself. Do this simple task:

Make function addNum to add 2 numbers, and see the result and check the hoisting property.

Make expression addNumExp to do the same thing, and compare both.

That's all for this article, see you next time.