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

JavaScript is full of small concepts that seem simple at first but understanding them deeply makes you a better developer. So dig into JavaScript.

One such concept is the difference between:

• Function Declaration

• Function Expression

Many beginners think they are the same.
Technically they both create functions but their behaviour inside JavaScript is different, especially because of something called hoisting.

So in this article, we’ll explore this step-by-step in a simple developer-friendly story.

Why Do We Need Functions?

Before comparing types, let's quickly understand what functions are.

A function is simply a reusable block of code that performs a task.

Instead of writing the same code again and again, we put it inside a function and reuse it whenever needed.

Example: adding two numbers.

function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 8

Here:

• add is the function name

• a and b are parameters

• the function returns the result

Functions help us:

• avoid repeating code

• organize logic

• make programs easier to maintain

Now let’s move toward our main topic.

Function Declaration

A Function Declaration defines a function using the function keyword followed by a name of function.

Syntax

function functionName(parameters) {
  // code
}

Example

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));

Output

5

In this example:

• add is declared using the function declaration syntax

• JavaScript registers this function during the initial code parsing phase

Because of this behaviour, function declarations are hoisted.

We’ll understand hoisting soon.

Function Expression

A Function Expression creates a function and stores it inside a variable.

Syntax

const functionName = function(parameters) {
  // code
}

Example

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3));

Output

5

Here something important happens:

The function itself does not have to be named.

This type of function is called an anonymous function.

Example:

const greet = function() {
  console.log("Hello Developer!");
};
greet();

Declaration vs Expression

Feature	Function Declaration	Function Expression
Syntax	function add(){}	const add = function(){}
Hoisting	Fully hoisted	Not fully hoisted
Naming	Must have a name	Can be anonymous
Usage	Good for reusable utilities	Useful for callbacks and dynamic functions
Execution	Can be called before definition	Must be defined before calling

Understanding Hoisting

JavaScript does something interesting when it runs code.

Before executing the program, it scans the file and registers function declarations.

This behaviour is called hoisting.

Think of it like this:

JavaScript lifts function declarations to the top of the file during setup.

Example: Function Declaration Hoisting

console.log(add(2, 3));
function add(a, b) {
  return a + b;
}

Output

5

Even though we called the function before defining it, it still works.

Why? Because JavaScript already knows about the function during the initial phase.

Example: Function Expression Behaviour

Now let's try the same thing with function expression.

console.log(add(2, 3));
const add = function(a, b) {
  return a + b;
};

Output

ReferenceError

Why? Because only the variable declaration is hoisted, not the function assignment.

So JavaScript sees something like this internally:

const add;
console.log(add(2,3)); // error
add = function(a,b){
 return a+b;
}

At the time of the function call, add is not yet a function.

Visual Execution Flow

Function Declaration

1. JS scans file
2. Registers function add()
3. Code execution starts
4. Function call works

Function Expression

1. JS scans file
2. Variable add is created
3. Function not assigned yet
4. Calling it causes error

When Should You Use Function Declaration?

Function declarations are useful when:

• The function is reusable

• It represents core logic

• It will be used in many places

Example

function calculateTax(price) {
  return price * 0.18;
}

When Should You Use Function Expression?

Function expressions are common when:

• Passing functions as arguments

• Writing callbacks

• Creating dynamic behaviour

Example

setTimeout(function() {
  console.log("Executed later");
}, 1000);

Modern JavaScript frameworks like React heavily use function expressions and arrow functions.

Real-World Developer Tip

Most professional codebases today use:

• function declarations for utilities

• function expressions or arrow functions for components and callbacks

Example from React:

const Button = () => {
  return <button>Click</button>;
};

Assignment for Practice

Try this exercise to understand the difference clearly.

1: Function Declaration

Write a function that multiplies two numbers.

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

console.log(multiply(4, 5));

Output

20

2: Function Expression

Now write the same logic using a function expression.

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

console.log(multiply(4, 5));

3: Experiment With Hoisting

Try calling both functions before defining them.

Observe what happens.

Example:

console.log(multiply(4, 5));

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

This will throw an error.

But with function declaration will work.

Key Takeaways

• Functions are reusable blocks of code

• JavaScript provides multiple ways to create functions

• Function declarations are hoisted

• Function expressions are not fully hoisted

• Declarations are good for reusable logic

• Expressions are useful for callbacks and dynamic usage

Understanding this difference helps you write cleaner and more predictable JavaScript code.

Summary

Concept	Explanation
Function	Reusable block of code
Function Declaration	Named function defined using function keyword
Function Expression	Function stored inside a variable
Hoisting	JavaScript moves declarations during setup
Key Difference	Declaration works before definition, expression does not

If you are learning JavaScript seriously, mastering these small concepts will slowly move you from beginner developer → confident JavaScript developer.

And remember:

Great developers don't just write code they understand how JavaScript thinks.

JavaScript becomes easier when you try things yourself.

Thank you for reading this article.

If you found this helpful, feel free to connect with me on LinkedIn and follow my journey as I continue sharing JavaScript and frontend concepts (more blogs).