# Function Declaration vs Function Expression: What’s the Difference? A Beginner-Friendly Guide to Function Declaration, Function Expression, and Hoisting Think about **BGMI**. You spot an enemy behind a rock. You aim your **M416** and press the **shoot button**. In just a second, many things happen automatically: * The **bullet fires** * The **gun recoil kicks in** * The **damage is calculated** * The **enemy’s HP decreases** All of this happens instantly, but the game developers didn’t rewrite this logic every time you press the shoot button. Instead, they created a **reusable block of code** that handles the shooting mechanics. Whenever you press the shoot button, the game simply **calls that block of code again**. In programming, these reusable blocks of code are called **functions**. Functions allow us to **write logic once and reuse it whenever we need it**. ## What Functions Are and Why We Need Them A **function** in JavaScript is a reusable block of code that performs a specific task. Instead of writing the same logic again and again, we write it once inside a function and call it whenever we need it. For example, imagine we want to add two numbers many times in our program. ```javascript function add(a, b) { return a + b; } console.log(add(2, 3)); console.log(add(10, 5)); ``` Here the function **add** performs the addition whenever we call it. This keeps the code clean and reusable. ## Function Declaration Syntax A **function declaration** defines a function using the function keyword followed by the function name. ```javascript function greet(name) { console.log("Hello " + name); } greet("Tejas"); ``` **function** → keyword used to create the function **greet** → function name **name** → parameter Code inside **{}** → function body Whenever we call `greet()`, the code inside the function runs. ## Function Expression Syntax Another way to create a function is **by using a function expression**. Here the function is stored inside a variable. ```javascript const greet = function(name) { console.log("Hello " + name); }; greet("Tejas"); ``` ## Difference between Function declaration and Function expression Function declarations and function expressions are both ways to create functions, but they behave differently in some cases.

Function Declaration

Function expression

It defined using function keyword with a name.

It is assigned to variable and function can be anonymous or named.

Syntax: function RCB(name) { return "Captain" + name }

Syntax: const RCB = function (name) { return "Captain" + name; }

Hoisted completely to the top of the scope, it means you can call it before it appears in the code. Example : RCB(); function RCB() { console.log("Captain"); }

Not fully hoisted only the variable is hoisted it means you cannot call it before it is defined. Example : RCB(); function RCB() { console.log("Captain"); }

RCB() is written later, it still works because JavaScript hoists entire function.

RCB() is treated like variable declared with const or let which isn't usable before initialization.

## Hoisting Before understanding hoisting, we need to understand how JavaScript runs code behind the scenes. Let’s look at what the JavaScript engine does behind the scenes. JavaScript is a **single-threaded language**, which means it runs code **line by line**. When we run the code, the JavaScript engine first prepares the execution environment, and that is where hoisting happens. Think of it like this: the JavaScript engine does three big things when running a program. 1. ### Global execution context This contains the Memory component and code code component ![](https://cdn.hashnode.com/uploads/covers/66ec348256cd7326e527eb48/68d4c5eb-06d0-4605-bebe-183311cc18a4.png align="center") This is where the hoisting happens. ### Memory Allocation Phase Before running the code, the JavaScript engine scans the file and stores declarations. ```javascript console.log(a); add(2,3); var a = 10; function add(x, y){ return x + y; } ``` Memory after creation phase looks like this, a = undefined add = complete function code This is hoisting. ### Execution Phase After the memory phase, JavaScript starts executing the code line by line. ### Call Stack Whenever a function runs, JavaScript create the new execution context (local execution context ) and pushes it into the call stack when the function completes **its** execution then it will go out of the call stack. ![](https://cdn.hashnode.com/uploads/covers/66ec348256cd7326e527eb48/77ff17f6-1d63-4a7f-ad13-d7204be7cbe2.png align="center") ### Understanding Hoisting with a Gaming Example Imagine you are playing **BGMI**, before the match starts, the game already loads some important weapons into the map. For example , M416 , DP-28. Even if you haven’t reached that location yet. The weapon does not exist until you open the crate. Only after opening the crate does the weapon appear. This is similar to **function declarations in JavaScript**. Even if the function is written later in the code, JavaScript already loads it during the initial phase. That’s why you can call it before it appears in the file. ```javascript shoot(); function shoot() { console.log("Enemy hit"); } ``` This works because the function was already prepared by JavaScript. Now imagine another situation. You open a loot box during the match, the weapon **does not exist until you open the crate**. only after opening the crate does the weapon appear. This is similar to a **function expression**. The function only exists **after the code reaches that line**. Example: ```javascript shoot(); const shoot = function() { console.log("Enemy hit"); }; ``` This will cause an error because the function is not ready yet. Now we know the hoisting now understand this for function declaration and function expression. | Function declaration | function expression | | --- | --- | | **function declarations are hoisted** this means we can call the function **before it is written in the code**. | function expression is not hoisted if we try to call the function before it is written is give the error. | | Example: `shoot(); function shoot() { console.log("Enemy hit"); }` This works because JavaScript moves the function declaration to the top internally. | Example: `shoot() const shoot= function() { console.log("Enemy hit"); };` This will cause an error. Because variable shoot is not assigned the function yet. So the function cannot be used before it is defined. | ## When to Use Each Type a) Use **Function Declaration** when, you want a reusable function OR function is part of the main logic Example: calculation, validation, formatting. b) Use **Function Expression** when, assigning functions to variables OR Using callbacks OR Working with event handlers. Example: ```javascript button.addEventListener("click", function() { console.log("Button clicked"); }); ``` ## Practice Challenge: Function Declaration vs Function Expression Now it’s your turn to practice. ### Task 1: Function Declaration Write a **function declaration** that multiplies two numbers. Example structure: ```plaintext function multiply(a, b) { // write your logic here } ``` Call the function and print the result in the console. ### Task 2: Function Expression Now write the **same logic using a function expression**. Example structure: ```plaintext const multiplyNumbers = function(a, b) { // write your logic here }; ``` Call this function and print the result. ### Task 3: Observe the Behavior Now experiment with the code. Try calling both functions **before they are defined**. Example: ```plaintext multiply(4, 5); ``` and ```plaintext multiplyNumbers(4, 5); ``` Observe what happens in each case. ## Final Thought Functions are one of the most powerful features in JavaScript because they allow us to organize and reuse code efficiently. Understanding the difference between function declarations and function expressions also introduces an important concept called **hoisting**, which affects how JavaScript executes code. Once you are comfortable with functions, you will find it much easier to build larger and more structured programs.