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

Hey everyone, Aman here! 👋

If you’ve been following along with my JavaScript journey, we've covered variables, arrays, and operators. Now, it's time to talk about the absolute workhorses of JavaScript: Functions.

Imagine you have a complex recipe for baking a cake. Instead of reading the entire recipe line-by-line every single time you want a cake, you just write it down once on a card and title it "Bake Cake." Whenever you're hungry, you just say, "Execute the Bake Cake card!"

That is exactly what a function is—a reusable block of code designed to perform a specific task. You write the logic once, and you can reuse it as many times as you want.

In JavaScript, there are two primary ways to create these reusable blocks: Function Declarations and Function Expressions. They look similar, but they behave differently under the hood. Let's break it down!

---

📝 1. The Function Declaration

This is the traditional, classic way to write a function in JavaScript. You start with the function keyword, give it a name, define its parameters inside parentheses (), and write the logic inside curly braces {}.

Let's write a simple function that adds two numbers together:

// Defining the function (Writing the recipe)
function addNumbers(a, b) {
  return a + b;
}

// Calling the function (Baking the cake!)
console.log(addNumbers(5, 10)); // Output: 15

Because we gave it a name (addNumbers), we can easily call it anywhere in our code.

---

📦 2. The Function Expression

A function expression achieves the exact same result, but it approaches the problem differently. Instead of declaring a standalone named function, we create an anonymous (nameless) function and store it inside a variable.

Let's write that exact same addition logic, but as an expression:

// Storing the function inside a variable
const addNumbersExpression = function(a, b) {
  return a + b;
};

// Calling it works exactly the same way!
console.log(addNumbersExpression(5, 10)); // Output: 15

Notice the difference? We used our const keyword to create a box, and we stuffed the function instructions directly into that box.

---

⚖️ The Big Difference: Hoisting (Keep it Simple!)

If both methods do the exact same thing, why do we have two different ways to write them? The biggest difference comes down to a JavaScript behavior called Hoisting.

Think of hoisting like JavaScript doing a quick "scan" of your file before it actually runs your code.

Function Declarations are Hoisted During that initial scan, JavaScript finds all your Function Declarations and pulls them to the very top of the file's memory. This means you can call a function declaration before you actually define it in your code!

// Calling it BEFORE it is defined? No problem!
console.log(greet("Aman")); // Output: Hello, Aman!

function greet(name) {
  return "Hello, " + name + "!";
}

Function Expressions are NOT Hoisted Because function expressions are stored inside variables (let or const), JavaScript does not pull them to the top during its scan. If you try to call a function expression before you define it, your code will crash!

JavaScript

// Trying to call it BEFORE it is defined...
// console.log(sayGoodbye("Aman")); // ❌ Uncaught ReferenceError!

const sayGoodbye = function(name) {
  return "Goodbye, " + name + "!";
};

// Calling it AFTER works perfectly.
console.log(sayGoodbye("Aman")); // Output: Goodbye, Aman!

---

🤔 When to Use Which?

• Use Function Declarations when you want a global utility function that needs to be available everywhere in your file, regardless of where you put the code. It makes organizing your files easier because you can put all your function definitions at the very bottom.

• Use Function Expressions when you want to enforce strict, top-to-bottom readability. Because they aren't hoisted, they force you (and other developers) to define the function before trying to use it. They are also heavily used when passing functions as arguments to other functions (like in array methods like map and filter!).

---

👨‍💻 Your Turn: The Assignment!

Time to open up your browser console and test this out for yourself. Seeing the error happen live is the best way to understand hoisting!

1. Write a Function Declaration called multiplyDecl that takes two numbers and returns their product.

2. Write a Function Expression stored in a variable called multiplyExpr that does the exact same thing.

3. The Hoisting Test: Try calling multiplyDecl(3, 4) on line 1, above where you actually wrote the function. Does it work?

4. The Crash Test: Now try calling multiplyExpr(3, 4) on line 2, above where you defined the variable. Watch the error pop up in your console!

Understanding the difference between these two will save you from a lot of frustrating bugs as your JavaScript files get larger and more complex.