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

In our previous part of the JavaScript Decoded series, we learned how to make our code think and make decisions using if, else, and switch statements. Now, it's time to take the next big step: organizing our code into reusable blocks.

Welcome to the powerhouse of JavaScript: Functions.

If you find yourself writing the exact same code multiple times, you are doing too much work! Functions fix this. In JavaScript, there are two primary ways to create them: Function Declarations and Function Expressions. Today, we'll break down exactly what they are, how they differ, and when you should use each one.

In this guide, you will learn:

• What functions are and why we need them

• Function declaration syntax

• Function expression syntax

• The key differences between the two

• How "hoisting" works (in plain English)

• When to use which

Let's dive in! 🚀

---

What Are Functions and Why Do We Need Them?

Imagine you are building a calculator app. Every time a user clicks "+", you need to add two numbers. Instead of writing the addition logic over and over again for every single button click, you write it once inside a function.

A function is simply a reusable block of code designed to perform a specific task. You write the code once, give it a name, and then you can "call" (or execute) it as many times as you want.

The Benefits of Functions:

1. Reusability: Write once, use everywhere.

2. Readability: Code is organized into logical chunks with descriptive names.

3. Maintainability: If you need to fix a bug in your logic, you only have to fix it in one place!

---

1. Function Declaration Syntax

A Function Declaration is the most traditional way to write a function in JavaScript.

It starts with the function keyword, followed by the name of the function, parentheses (), and curly braces {}.

Example: Adding Two Numbers

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

// Calling the function
let sum = addNumbers(5, 10);
console.log(sum); // Output: 15

How it works:

• function: The keyword that tells JavaScript you are creating a function.

• addNumbers: The name of the function (you can name it whatever you want).

• (a, b): These are parameters—ingredients the function needs to do its job.

• return a + b;: The output that the function gives back to you.

---

2. Function Expression Syntax

A Function Expression is when you create a function and store it directly inside a variable.

Instead of naming the function itself, you create an "anonymous" function (a function without a name) and assign it to a variable using =.

Example: Adding Two Numbers (Expression Style)

// Defining the function as an expression
const addNumbersExpression = function(a, b) {
  return a + b;
};

// Calling the function
let sum = addNumbersExpression(5, 10);
console.log(sum); // Output: 15

Notice the syntax difference? The logic inside the curly braces is identical. You still call it exactly the same way: addNumbersExpression(5, 10). The only difference is how we defined it.

---

Key Differences: Declaration vs. Expression

Why does JavaScript have two different ways to do the exact same thing? While they look similar, they behave differently under the hood.

Here is a quick comparison table before we look at the biggest difference: Hoisting.

Feature	Function Declaration	Function Expression
Syntax	Starts with function keyword	Assigned to a variable (e.g., const fn = function())
Name	Must have a name	Usually anonymous (stored in a named variable)
Hoisting	Fully hoisted (can be called before defined)	Not hoisted (cannot be called before defined)

---

The Big Difference: Hoisting (Explained Simply)

The most important difference between a Declaration and an Expression is Hoisting.

Hoisting is a JavaScript behavior where variable and function declarations are "lifted" to the top of your code before the code is actually executed.

Function Declarations ARE Hoisted

Because function declarations are hoisted, you can call the function before you define it in your code.

// Calling the function BEFORE it is defined!
greetUser("Debesh"); // Output: "Hello, Debesh!"

// The definition is further down
function greetUser(name) {
  console.log("Hello, " + name + "!");
}

Why does this work? JavaScript scans your file, sees the function greetUser(), pulls it to the top of memory, and then runs your code line-by-line.

Function Expressions Are NOT Hoisted

Because function expressions are stored inside variables (like const or let), they are not hoisted in the same way. You cannot call them before you define them.

// Trying to call it BEFORE it is defined
greetUserExpression("Debesh"); // ❌ ReferenceError: Cannot access 'greetUserExpression' before initialization

// The definition
const greetUserExpression = function(name) {
  console.log("Hello, " + name + "!");
};

Why does this fail? JavaScript knows the variable greetUserExpression exists, but because it is const, it throws an error if you try to use it before the code actually reaches the line where the function is assigned to it.

---

How Code Flows: Visualizing the Execution

Here is a simple way to visualize how your code executes when you call a function:

---

When To Use Which?

Now that you know the difference, which one should you use?

1. Use Function Declarations when you want your functions to be available globally throughout your file, regardless of where they are placed. Many developers like putting all their function declarations at the bottom of a file to keep the top of the file clean.

2. Use Function Expressions when you want to enforce strict, top-to-bottom reading of your code. Because they aren't hoisted, it forces you to define your functions before you use them, which can prevent confusing bugs.

(Note: In modern JavaScript, you will often use an even shorter syntax called Arrow Functions for expressions, which we will cover in the next part of this series!)

---

Your Turn: Assignment Time! 💻

To truly understand this, you need to write it yourself. Open up your code editor and try this:

1. Write a function declaration named multiply that takes two numbers and returns their product.

2. Write the exact same logic using a function expression and store it in a variable named multiplyExp.

3. Call both functions with some numbers and console.log() the results.

4. The Hoisting Test: Try moving your console.log(multiply(2, 3)) line above the function definition. Does it work? Now try moving the console.log(multiplyExp(2, 3)) line above its definition. What error do you get?

Now that you understand how to write and use functions, you're ready to explore :

• Arrow Functions — A shorter, more modern way to write function expressions

• Loops and Iteration — for, while, and iterating over data

• Arrays — Storing lists of data and using loops to work with them

Happy coding! 🎉