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

Something interesting happens early on when you start writing JavaScript. You notice yourself that you are writing the same logic in multiple places multiple times..

Maybe you are calculating a total in three different spots. Maybe you're checking if a user is logged in again and again. Maybe you're formatting a date the same way across the whole file.

And at some point it hits you:

Why am I writing the same thing over and over?

That's exactly the problem functions solve.

---

What Are Functions?

A function is a reusable block of code. Instead of repeating the same logic everywhere, you write it once, give it a name, and call it whenever you need it.

Think of it like a task you can trigger on demand anytime.

Without functions:

console.log(12 + 8);
console.log(25 + 14);
console.log(6 + 99);

With a function:

function add(a, b) {
  return a + b;
}

// a add function is created above


console.log(add(12, 8));
console.log(add(25, 14));
console.log(add(6, 99));

// used the add --> function ; multiple times.

Same result. But now the logic lives in one place. If you ever need to change how addition works => maybe add rounding or validation => you change it once and it updates everywhere.

That's the real power of functions.

---

Function Declaration

The most common way to create a function in JavaScript is a function declaration.

function greet(name) {
  console.log("Hey " + name + "!");
}

Let's break that down:

• function → keyword that tells JavaScript you're creating a function

• greet → the name you're giving it

• (name) → the parameter — the input it receives

• { } → the function body — the code that runs when called

To use it, you call it by name:

greet("Arjun");  // Hey Arjun!
greet("Priya");  // Hey Priya!

Another example — a function that calculates a bill total:

function calculateTotal(price, tax) {
  return price + tax;
}

console.log(calculateTotal(500, 45));  // 545
console.log(calculateTotal(1200, 108)); // 1308

Write it once. and use it anywhere...

---

Function Expression

Ok so from here's where things get veryy very interesting.

In JavaScript, functions are values. Just like you can store a number or a string in a variable, you can store a function in a variable too. This is called a function expression.

const greet = function(name) {
  console.log("Hey " + name + "!");
};

Instead of declaring the function directly, you're assigning it to a variable.

Calling it works the same way:

greet("Arjun");  // Hey Arjun!

Same bill total example, written as a function expression:

const calculateTotal = function(price, tax) {
  return price + tax;
};

console.log(calculateTotal(500, 45));  // 545

Identical output. Different structure.

---

[ Declaration vs Expression ]

At first glance they look almost the same. But there are real differences worth knowing.

	Function Declaration	Function Expression
Syntax	function name() {}	const name = function() {}
Has its own name	Yes	Usually anonymous
Stored in a variable	No	Yes
Hoisted	Fully	Not the same way

The last row is a new thing => hoisting.. It is the biggest difference in practice. Now we will see what's actually hoisting is.

---

Hoisting

Before your JavaScript code actually runs line by line, the engine does a quick scan and prepares certain things in memory. This is called hoisting.

Function declarations are fully hoisted. JavaScript stores the entire function in memory before execution begins. So you can call a declared function even before it appears in your file.

greet("Priya");  // Hey Priya!

function greet(name) {
  console.log("Hey " + name + "!");
}

This works perfectly. JavaScript already knew about greet before reaching that line.

Function expressions are not hoisted the same way. The variable is registered in memory, but the function isn't assigned to it yet.

greet("Priya");  // ReferenceError: Cannot access 'greet' before initialization

const greet = function(name) {
  console.log("Hey " + name + "!");
};

JavaScript knows the variable greet exists — but at that point, it doesn't have a function in it yet. So it throws an error.

Simple rule:

Function declarations can be called before they're defined. Function expressions cannot.

---

When to Use Each One

Both create functions. Both work. So how do you choose?

Use function declarations when:

You want a simple, reusable utility that can be called from anywhere in the file.

function formatPrice(amount) {
  return "₹" + amount.toFixed(2);
}

Declarations are clean, readable, and great for helper functions that we use throughout our code.

Use function expressions when:

When we want to treat a function as a value and pass it around, store it conditionally, or use it as a callback.

const handleClick = function() {
  console.log("Button clicked");
};

You'll see that this pattern constantly in:

• Event handlers

• Array methods like map and filter

• Callbacks

• React components

So we can see that function expressions show up a lot. and they're especially useful when functions need to behave like data passed in, returned out, or can be assigned dynamically.

an easy way to remember :

Function declaration = defining a task by name Function expression = storing a task inside a variable

---

Check Yourself

Part 1: Function Declaration

Write a function that multiplies two numbers and call it.

function multiply(a, b) {
  return a * b;
}

console.log(multiply(6, 7));   // 42
console.log(multiply(12, 3));  // 36

Part 2: Function Expression

Now write the exact same logic as a function expression.

const multiplyNumbers = function(a, b) {
  return a * b;
};

console.log(multiplyNumbers(6, 7));   // 42
console.log(multiplyNumbers(12, 3));  // 36

Same output. Different structure.

Part 3: The Hoisting Experiment

Try calling both functions before you define them.

// Call before defining
console.log(multiply(4, 5));        // works or error?
console.log(multiplyNumbers(4, 5)); // works or error?

function multiply(a, b) {
  return a * b;
}

const multiplyNumbers = function(a, b) {
  return a * b;
};

Run it. See what happens.

multiply works fine. multiplyNumbers throws an error. That's hoisting ....It's not as a concept to memorize, but something we can actually see and feel..

---

Wrapping Up

Functions are one of the most important concepts in JavaScript — and understanding the difference between declarations and expressions is a step most beginners skip too fast.

Both create functions. Both work. But they behave differently when JavaScript prepares your code before running it.

• Function declarations are fully hoisted => call them anywhere.

• Function expressions only work after they've been assigned => use them when you need functions to behave like values.

Right now the difference might feel small. But once you get into callbacks, array methods, and eventually frameworks like React this distinction shows up constantly, and when it does, you'll already see and know exactly what's happening.

---