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

In JS functions are the building blocks, Thinks of them as a reusable piece of code block that once created then it can be used any number of time and anywhere in the entire codeBase

There are many ways to declare a function in JS  
at first u may think why we need so many ways to do the same thing, but belive me by the end of this blog u will understand that they all serve different work

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

A function is just a reusable block of code that is designed to perform a specific task. And return us a value  
Example:  

![](https://cdn.hashnode.com/uploads/covers/6650c74777de75e6eb09d8a8/f72051b6-0d57-4176-a678-0c9768baf221.png align="center")

Here in the above example  
`'add`' is the name of the function  
`a` and `b` are inputs to the function ( technically called a arguments)  
While calling the function `add` we are passing the value of the arguments ( arguments)  
return `a + b` gives the result that we have printed using console  
Now instead of writing a + b everywhere we can just call the function add with new arguments

## Function Declaration

A function declaration defines a named function using the `function` keyword, followed by the name of the function and its parameters.

Syntax :

![](https://cdn.hashnode.com/uploads/covers/6650c74777de75e6eb09d8a8/f2f53f9f-3a9e-4bf0-a529-e250787dd77b.png align="center")

Example :

![](https://cdn.hashnode.com/uploads/covers/6650c74777de75e6eb09d8a8/a5c8f267-d576-4f3e-89ec-cf9e913ab16c.png align="center")

## Function Expression

A function expression involves storing a function inside a variable. These functions can be named, but they are most commonly written as "anonymous functions" (functions without a name).

Syntax:

![](https://cdn.hashnode.com/uploads/covers/6650c74777de75e6eb09d8a8/245ba02d-5bb8-432d-b687-ba2f46d9a68e.png align="center")

Example:

![](https://cdn.hashnode.com/uploads/covers/6650c74777de75e6eb09d8a8/8fa90844-05f4-4795-b991-96d88328ad31.png align="center")

## Function Declaration vs Function Expression

![](https://cdn.hashnode.com/uploads/covers/6650c74777de75e6eb09d8a8/b996f30f-8d7b-424e-a18b-80365d44877a.png align="center")

## A High-Level Look at Hoisting

Hoisting is how JavaScript "moves" declarations to the top of their scope before the code actually executes.

*   **Function Declarations are fully hoisted.** This means you can call the function *before* you define it in your code, and it will work perfectly.
    
*   **Function Expressions are not hoisted in the same way.** Because they are assigned to variables, the engine knows the variable name exists, but it doesn't know it's a function until that line of code is reached. Trying to call it early will result in an error.
    

## When Should You Use Each?

### Both approaches are useful depending on the situation.  
Use Function Declarations When

*   You want reusable utility functions
    
*   The function should be available throughout the file
    
*   You want clearer and simpler code structure
    

### Use Function Expressions When

*   You want to store functions inside variables
    
*   You want to pass functions as arguments
    
*   You are working with callbacks or functional programming patterns