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

In this article we'll learn about function declaration, function expression and the difference between them. Before jumping on the topic itself let's understand the function meaning and it's use. Functions are nothing but reusable block of code. We make them to perform repeated work efficiently. It help us follow the important rule of 'DRY' (DO NOT REAPEAT YOURSELF).

If you want to add two numbers, you will probably write it like this:

```javascript
let sum1 = 5 + 3;
console.log(sum1);

let sum2 = 10 + 7;
console.log(sum2);
```

But if you have to get multiple sum of 2 numbers then the code become redundant and messy which becomes hard to manage.

That is where we write function:

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

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

Now we can reuse the same function whenever we need to add two numbers.

## Function Declaration

One common way to create a function is using a function declaration.

Example:

```plaintext
function greet() {
  console.log("Hello, welcome to JavaScript!");
}
```

To run the function, we simply call it:

```plaintext
greet();
```

Output:

```plaintext
Hello, welcome to JavaScript!
```

Functions can also accept parameters.

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

greet("Sam");
```

Output:

```plaintext
Hello Sam
```

## Function Expression

Another way to create a function is using a function expression.

Here, the function is stored inside a variable. If you still have doubt about what is a variable then I would recommend you read this [blog](https://aronamic.hashnode.dev/variables-and-data-types-in-javascript) first to get the hang of things here.

Example:

```plaintext
const greet = function () {
  console.log("Hello from function expression");
};

greet();
```

Output:

```plaintext
Hello from function expression
```

We can also pass parameters here:

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

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

Output:

```plaintext
20
```

## Important difference between function declaration and expression

*   **Syntax difference**
    
    *   Function declaration is defined directly using the `function` keyword.
        
    *   Function expression stores the function inside a variable.
        
*   **Hoisting**
    
    *   Function declarations are hoisted, so they can be called before they are defined.
        
    *   Function expressions are not hoisted in the same way, so they must be defined before they are called.
        
*   **Usage**
    
    *   Function declarations are commonly used for reusable functions in a program.
        
    *   Function expressions are often used when functions need to be assigned to variables or used as callbacks.
        
*   **Readability**
    
    *   Function declarations are usually easier to read in larger programs.
        
    *   Function expressions provide more flexibility in certain situations.
        

## Basic Idea of Hoisting

Hoisting is the behaviour where all the function declaration are moved to the top of their scope.

This means we can call a function declaration before it appears in the code.

Example:

```plaintext
sayHello();

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

This works because JavaScript internally treats it like:

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

sayHello();
```

However, function expressions are not hoisted in the same way, so they must be defined before being used.

## Summary

Functions are one of the most important concepts in JavaScript. They allow us to group reusable logic into a single block of code and call it whenever needed.

By understanding function declarations, function expressions, and the basic idea of hoisting, we can write cleaner, more organized, and maintainable JavaScript programs.