# 04 Function Declaration vs Function Expression


Hey! readers in this blog we are going to go throught with the functions in javaScript, basic syntax , declaration , expression etc.

First question that comes in our mind is - what exactly is function?

*   In simpler terms it is something which to maintain dry (don't repeat yourself) principal , means it is that block of code which we have to use again and again in our codebase
    

still not clear? just look at this example:

Suppose we want to add two numbers a & b then how we are going to write the code it will be something like this :

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/12f23f4b-3ff7-4728-968a-b53b1a09c500.png align="center")

but what if i told you again i have to add two numbers whose value is 70 and 80 , and i want to add these two numbers then it will be like this :

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/d2512819-8703-48af-a339-638192cf1619.png align="center")

Have you observed something? ain't we repeating the same block of code again to get the desired output? Yes, we are now what will happens if i told to to again add two numbers whose value is 90 and 100 , then again you have to create 2 variables and again strore the result into another variable and then print the required output. So yes, we are repeating same code again and again , hence to overcome this problem concept of `functions` came into the existance.

Same problem using functions :

![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/d6dc4eeb-6d5e-4f02-945f-52be35b4ad95.png align="center")

Now look at the above example, how `function` made our task very easy we just have to call that function and pass the arguments in it and done, we got out ans. So this is why we required `functions`.

* * *

### Function Declaration

*   it has a function name right there , we simply have to call that bame
    

```javascript
function add(x, y){
    return x + y;
}

let ans1 = add(4,5);
console.log(ans1); // output : 9
```

### Function Expression

*   it basically means we are creating a function but storing that function in a seprate variable
    
    ```javascript
    const add = function(x,y){
        return x + y;
    }
    
    let ans = add(10,20);
    console.log(ans); // output 30
    
    // here add becomes the function's name which is used for calling
    // that function
    ```
    

* * *

### Difference between the Declaration and Expression

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| **Definition** | A function defined with the `function` keyword and a name. | A function stored inside a variable. |
| **Syntax** | `function add(a, b) { return a + b; }` | `const add = function(a, b) { return a + b; };` |
| **Hoisting** | Fully hoisted — can be called **before it is defined**. | Not hoisted in the same way — **cannot be called before definition**. |
| **Name Requirement** | Must have a **function name**. | Can be **anonymous** (no name). |

* * *

### Basic Idea of hoisting :

Hoisting refers to the behavior where JavaScript moves the declarations of the variables and functions to the top of their scope during the compilation phase.

Key point -

*   **Function declaration** can generally be used before they apper in the code
    
    ```javascript
    const ans = addNums(2,3,4);
    console.log(ans); // output : 9
    
    function addNums(x,y,z){
        return x + y + z;
    }
    ```
    

*   **Function expression** usually can't be used before they are defined
    
    ```javascript
    const ans = addNums(2,3,4);
    console.log(ans); // error
    
    const addNums = function (x,y,z){
        return x + y + z;
    }
    ```
    
    ![](https://cdn.hashnode.com/uploads/covers/68c6839f7c0256a7a628c551/87828eab-1192-4916-9f4e-20dca5fdc1af.png align="center")
    

### When to use each type ?

1.  **Function declaration** : when we want a simple named function, or when we want to call it anywhere, even above the definition of the function or when we are writing normal "utility" functions like `add` `subtract` `multiply` etc.
    
    ```javascript
    function addNums(x,y,z){
        return x + y + z;
    }
    ```
    
2.  **Function Expression :** when we want to store the function in a variable or when we want to pass it somewhere.
    
    ```javascript
    const  addNums = function(x,y,z){
        return x + y + z;
    }
    ```
    

* * *

### Try it yourself :

here are some simple tasks that you can perform :

1.  Write a function declaration that multiplies two numbers
    
2.  Write the same logic using function expression
    
3.  Call both functions and print results
    
4.  Try calling them before defining and observe behavior
    

* * *

### Conclusion

Functions are the building blocks of reusable, maintainable JavaScript. They let you follow the DRY principle by encapsulating logic you need to run multiple times.

*   just keep one thing in mind (hoisting)
    
    *   Declaration : works before the definition
        
    *   Expression : throws an error.
        

* * *

Hope you enjoyed reading❤️