# JavaScript Functions: Declaration vs. Expression

Let me introduce you to function.

## What are Functions?

In JavaScript, a function is a **reusable block of code**.

## **Why use them?**

To avoid repetition and improve organization and efficiency.

For example, if we need to add two numbers, writing it manually every time like:

10 + 20 = 30  
20 + 30 = 50  
...

is not efficient. Instead, it is better to create a function that performs the addition and returns the result whenever needed.

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

console.log(addTwoNumbers(10, 20)); // Output: 30
```

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/3cddc194-019f-4564-be3d-44f0d0087ca0.png align="center")

In JavaScript there are different way to write function.

#### **Function Declaration**

This is the traditional way. It starts with the `function` keyword and has a name, like an ancient family name (The Starks).

```javascript
function greetKing() {
  return "The King in the North!";
}
```

#### **Function Expression**

Here, you create a function and assign it to a variable. The function is the "mercenary," and the variable is the "contract."

```javascript
const greetMercenary = function() {
  return "I fight for gold.";
};
```

Alright, let’s get into the Magic of JavaScript. To understand why we have two ways to write functions, we have to look at how the JavaScript engine reads your code before it actually runs it.

This is where **Hoisting** comes in.

## Hoisting

### The Secret of how JavaScript Reads Your Code

Imagine you give a book to a friend. Most people read page by page, top to bottom. But the JavaScript engine is like a speed-reader who scans the whole book first to see who the "Main Characters" are before actually reading the story.

**Hoisting** is JavaScript's behavior of moving declarations to the top of the current scope during that first scan.

### Function Declarations:

When you use a **Function Declaration**, JavaScript sees that `function` keyword and says, "I know this guy!" It moves the entire function to the top of the memory.

So, You can call the function **before** you even write it in your file.

```javascript
// This works perfectly!
greetKing(); 

function greetKing() {
  console.log("The King in the North!");
}
```

**Why this work?** Because during the scan, JavaScript "hoisted" the `greetKing` function to the very top. By the time it starts executing the code, it already knows exactly what that function does.

### Function Expressions:

With a **Function Expression**, you are assigning a function to a variable (using `const` or `let`). JavaScript handles variables differently. It sees the variable name, but it **doesn't** look at what’s inside it until it actually reaches that line of code.

So, If you try to call it before the line where it’s defined, the code will crash.

```javascript
// This will throw an ERROR!
// greetMercenary(); 

const greetMercenary = function() {
  console.log("I fight for gold.");
};

// This works fine.
greetMercenary();
```

**Why it will throw error?** JavaScript knows there is a variable called `greetMercenary`, but it’s empty (uninitialized) until the engine physically lands on that line. It's like a contract that hasn't been signed yet.

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Aspect</strong></p></td><td colspan="1" rowspan="1"><p><strong>Function Declaration</strong></p></td><td colspan="1" rowspan="1"><p><strong>Function Expression</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Hoisting</strong></p></td><td colspan="1" rowspan="1"><p><strong>Fully Hoisted.</strong></p></td><td colspan="1" rowspan="1"><p><strong>Not Hoisted.</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Calling</strong></p></td><td colspan="1" rowspan="1"><p>Can be called anywhere</p></td><td colspan="1" rowspan="1"><p>Can only be called <strong>after</strong> the definition line.</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Goal</strong></p></td><td colspan="1" rowspan="1"><p>Best for global, always-available tools.</p></td><td colspan="1" rowspan="1"><p>Best for on-the-fly logic or passing into other functions.</p></td></tr></tbody></table>

So now you know,

*   **Declarations are Hoisted:** Like a Stark’s reputation, the kingdom knows they exist before they even arrive.
    
*   **Expressions are Not:** Like a sellsword, they don't exist in the eyes of the law until the contract is signed.
    

> "The only way to learn a new programming language is by writing programs in it."
> 
> — **Dennis Ritchie**

### **Let's Connect! 🚀**

I’m currently deep-diving into the **JavaScript**, building projects and exploring the internals of the web. If you're on a similar journey or just love talking about JavaScript, let’s stay in touch!

*   **Connect on LinkedIn:** [**Satpalsinh's Profile**](https://www.linkedin.com/in/satpalsinhrana)
    
*   **Follow my Blog:** [**blogs.satpal.cloud**](http://blogs.satpal.cloud)
    

**Keep coding and keep building.**