# JavaScript Functions: Declaration vs. Expression – Cleared Up!
Hey fellow developers! If you're diving into the core of JavaScript, there is one fundamental topic you absolutely need to master. Today, let’s tackle a question that trips up almost every new JS developer: **What is the difference between a Function Declaration and a Function Expression?**
It sounds technical, but it’s actually very simple once you see them side-by-side. Let’s break it down!
### 1. What are Functions and Why Do We Need Them?
Before we look at the difference, we must agree on what a *function* is.
Think of a function as a **reusable block of code** designed to perform a particular task. You don't want to rewrite the same lines of code ten times, right? Instead, you package that logic into a function.
**Why are they vital?**
* **DRY Principle:** Don’t Repeat Yourself!
* **Organization:** Break complex problems into small, manageable pieces.
* **Easy Updating:** If your logic changes, you only have to fix it in one place.
*Simple Example: Adding Two Numbers*
We use functions to execute a process, like taking two numbers and getting their sum.
![](https://cdn.hashnode.com/uploads/covers/696bc6dec07ec43f0efab361/0c36c375-8c72-4a27-a2d7-ac48568535cd.png align="center")
### 2. Function Declaration: The Standard Way
A Function Declaration is the classic, traditional way to define a function. You’ve probably already seen it.
**The Key Rule:** A declaration must have a name, and it is a standalone statement. It does not go inside a variable assignment.
**Syntax:**
JavaScript
```javascript
function functionName(parameters) {
// code to execute
}
```
**Example:**
JavaScript
```javascript
function addDeclaration(a, b) {
return a + b;
}
console.log(addDeclaration(5, 3)); // Outputs: 8
```
This is very straightforward! You declare it, name it, and call it.
### 3. Function Expression: The Variable Way
A Function Expression is when you define a function and *assign* it to a variable. In this case, the function is treated like any other value (like a number or a string).
**The Key Rule:** An expression is always part of a larger expression statement, typically a variable assignment (`const myVar = ...`). Function expressions are often *anonymous* (they don't need their own name, they use the variable name instead).
**Syntax:**
JavaScript
```javascript
const variableName = function(parameters) {
// code to execute
};
```
**Example:**
JavaScript
```javascript
const addExpression = function(a, b) {
return a + b;
};
console.log(addExpression(10, 2)); // Outputs: 12
```
The major difference is the `const addExpression =` part.
### 4. High-Level Comparison and Hoisting!
The visual difference is clear, but the *functional* difference is all about a concept called **Hoisting**.
I will explain hoisting in the simplest terms.
> **Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope before execution.**
In other words, JavaScript "pre-loads" some things so you can use them before they appear in your code.
Feature
Function Declaration
Function Expression
Syntax Style
Standalone statement
Part of a variable assignment
Name
Mandatory
Often anonymous
Hoisting
YES. You can call it before it’s defined.
NO. You must define it before you call it.
![](https://cdn.hashnode.com/uploads/covers/696bc6dec07ec43f0efab361/49d9f6d4-1005-481d-9536-39912f91e696.png align="center")
![](https://cdn.hashnode.com/uploads/covers/696bc6dec07ec43f0efab361/fe7c3dc1-5264-410f-bbf1-4f89ee29df76.png align="center")
### 5. When to Use Each Type
This is a bit about personal style, but there are good rules of thumb for beginners.
**Use Function Declarations When:**
* **You need simplicity:** The syntax is clear and easy for beginners.
* **You want structure:** For main, global-level utility functions that you might call from different parts of your script.
* **You like the freedom of hoisting:** You can declare them anywhere, often putting them at the bottom of your file for clarity.
**Use Function Expressions When:**
* **You are working with modern JS (callbacks/arrows):** Expressions are essential for advanced features like callback functions (passing a function as an argument).
* **You want to limit scope:** Because they are assigned to variables (`const`, `let`), they respect variable scope and don't pollute the global space as easily.
* **You are dynamically defining logic:** Expressions allow you to change which function logic is assigned to a variable based on conditions.
For most day-to-day utility tasks in this cohort, Function Declarations are a safe and clean bet. As we move into callbacks and advanced patterns, Expressions will become your best friends.
### 6. Small Assignment: (My VS Code Experiment)
To make this stick, you *have* to type the code. I fired up VS Code to test this out for our assignment, and I highly recommend you do the same. Here is the practice logic I used:
**Step 1: Writing and Calling Both Functions**
First, I wrote a Function Declaration (`multiply`) and a Function Expression (`multiplyVar`) to do the exact same thing: multiply two numbers. Then, I called them both at the bottom of my file.
![](https://cdn.hashnode.com/uploads/covers/696bc6dec07ec43f0efab361/ba54b5d7-5e37-4041-be6a-690cd6a0c72f.png align="center")
**Step 2: The Hoisting Test (Watch it Crash!)**
Now for the fun part—the hoisting test. I moved the `console.log` calls to the very top of my `function.js` file, *before* either function was defined, to see what JavaScript would do.
![](https://cdn.hashnode.com/uploads/covers/696bc6dec07ec43f0efab361/8f4b11b4-35ee-4699-8f0a-fc8ab77c9556.png align="center")
When I ran this in my terminal using Node.js, the results proved exactly what we learned! The Function Declaration worked perfectly and printed `4`. But the Function Expression stopped my code completely with a big red `ReferenceError: Cannot access 'multiplyVar' before initialization`.
Because `multiplyVar` was assigned using `const`, it stayed exactly where I put it and was not hoisted, causing the crash when I tried to use it too early.
## **Happy coding...**