# Function Declaration vs Function Expression:

### **Functions in JavaScript** :

In programming, we often write some code that we want to **reuse again and again**.

Instead of writing the same code many times, we create a **function**.

### What is a Function?

A **function** is a block of code that performs a specific task and can be **called whenever needed**.

### Simple Analogy

Think of a **coffee machine** ☕

*   You press a button
    
*   The machine performs steps internally
    
*   It gives you coffee
    

Similarly:

*   We **call a function**
    
*   It performs some **task**
    
*   It returns a **result**
    

* * *

### **Basic Syntax of a Function**

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

To run it we must **call the function**.

```javascript
greet();
```

### Output

```plaintext
Hello User
```

* * *

### **Function with Parameters**

Parameters allow us to **send data into a function**.

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

greet("Rahul");
```

### Output

```plaintext
Hello Rahul
```

* * *

### **Function with Return Value**

Functions can also **return results**. Return actually store the result in the given variable .

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

let result = add(5, 3);
console.log(result);
```

### Output

```plaintext
8
```

Here, 8 is stored in a variable named result .

* * *

### **Types of Functions in JavaScript**

There are mainly **two important ways** to create functions:

1. **Function Declaration**  
  
2. **Function Expression**

And another modern type:

3\. **Arrow Function**

* * *

### **1\. Function Declaration**

A **function declaration** is the normal way of creating a function.

### Syntax

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

### Example

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

console.log(multiply(4, 3));
```

### Output

```plaintext
12
```

* * *

### **2\. Function Expression**

A **function expression** is when a function is **stored inside a variable**.

### Syntax

```javascript
let variableName = function(parameters){
   // code
}
```

### Example

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

greet("Aman");
```

### Output

```plaintext
Hello Aman
```

* * *

### **Difference Between Function Declaration and Function Expression :**

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Definition | Defined using `function name()` | Stored inside a variable |
| Hoisting | Yes | No |
| Calling before definition | Possible | Not possible |
| Use case | General functions | Dynamic functions |

* * *

### **Hoisting**

**Hoisting means JavaScript moves declarations to the top of the scope before execution.**

This behavior affects **function declaration and function expression differently.**

* * *

### **Hoisting in Function Declaration**

Function declarations are **fully hoisted**.

### Example

```javascript
sayHello();

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

### Output

```plaintext
Hello
```

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

* * *

### **Hoisting in Function Expression**

Function expressions **are not hoisted like declarations**.

Example:

```javascript
sayHello();

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

### Output

```plaintext
Error
```

Because the variable is **not initialized yet**.

* * *

### **Function Expression with var, let, const**

The behavior changes slightly depending on the variable type.

* * *

### **1\. Using var**

```javascript
sayHi();

var sayHi = function(){
   console.log("Hi");
}
```

### What happens?

`var` is hoisted but **initialized with undefined**.

So JavaScript sees:

```javascript
var sayHi = undefined;
sayHi(); // error
```

Error occurs because **undefined is not a function**.

But if you **directly call the function** then the output is :

```javascript
sayHi();
```

**Output**

```plaintext
undefined
```

* * *

### **Using let or const**

```javascript
sayHi();

let sayHi = function(){
   console.log("Hi");
}
```

### Result

This gives a **ReferenceError**.

> Because `let` and `const` are in **Temporal Dead Zone (TDZ)** until initialization.

* * *

### **Why Use Function Expression?**

Function expressions are useful when:

*   Passing functions as arguments
    
*   Creating **anonymous functions**
    
*   Functional programming
    
*   Callback functions
    

Example:

```javascript
setTimeout(function(){
   console.log("Hello after 2 seconds");
}, 2000);
```

* * *

### **Anonymous Functions**

A function without a name is called an **anonymous function**.

Example:

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

* * *

### **Immediately Invoked Function Expression (IIFE)**

Sometimes we want a function to **run immediately after creation**.

Example:

```javascript
(function(){
   console.log("I run immediately");
})();
```

* * *

### **Real Life Analogy**

Imagine a **restaurant kitchen**:

*   Function → Recipe
    
*   Parameters → Ingredients
    
*   Return value → Final dish
    

You call the recipe when needed instead of rewriting it every time.

* * *

### **Important Points to Remember**

*   Functions help **reuse code**
    
*   They make code **modular and readable**
    
*   Function declaration is **hoisted**
    
*   Function expression is **not fully hoisted**
    
*   `var`, `let`, and `const` behave differently in hoisting
    

* * *

### **Small Example Combining Everything**

```javascript
function area(length, width){
   return length * width;
}

let result = area(10, 5);

console.log("Area is:", result);
```

Output

```plaintext
Area is: 50
```

* * *

### **Arrow Function**

Arrow functions are:

*   shorter
    
*   cleaner
    
*   widely used in modern JavaScript
    

Example preview:

```javascript
const add = (a, b) => a + b;
```

To learn more about arrow function you can refer to this blog .

link : [https://dev-radhika.hashnode.dev/arrow-functions-in-javascript](https://dev-radhika.hashnode.dev/arrow-functions-in-javascript)

* * *

### **Conclusion**

Functions are one of the **most important concepts in JavaScript**.

They help us:

*   organize code
    
*   reuse logic
    
*   make programs cleaner
    

So, this was all about functions. Thank you for reading this blog . I am open to feedback and suggestions .