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

When I started learning JavaScript functions, one thing confused me a little in the beginning: why are there different ways to create a function?

At first, both looked similar because both can do the same job. But after practicing, I understood that function declarations and function expressions are written differently and behave a little differently too.

In this article, we’ll understand both in a simple way with small examples.

What Is a Function and Why Do We Need It?

I like to think of a function as a reusable block of code.

Instead of writing the same logic again and again, we can put that logic inside a function and call it whenever we need it.

For example, if I want to add two numbers many times, I don’t need to rewrite the same code every time. I can just create a function once and use it again.

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

So in simple words, functions help us:

• reuse code

• keep code organized

• make programs easier to read

• avoid repeating the same logic

Function Declaration

A function declaration is the most common and straightforward way to define a function.

Syntax

function functionName(parameters) { // code }

Example

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

Here:

• function is the keyword

• greet is the function name

• the code inside { } runs when we call the function

Let’s take a slightly more useful example:

function addNumbers(a, b) { return a + b; } console.log(addNumbers(10, 5)); // 15

This is a function declaration because the function is defined directly with its name.

Function Expression

A function expression means we create a function and store it inside a variable.

Syntax

const variableName = function(parameters) { // code };

Example

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

Here, the function itself does not have to be written with a direct function name after the function keyword. Instead, it is assigned to the variable greet.

Another example:

const addNumbers = function(a, b) { return a + b; }; console.log(addNumbers(10, 5)); // 15

This works just like the function declaration example. The main difference is in how the function is created and stored.

Looking at Both Side by Side

Here is the same logic written in both ways.

Function Declaration

function multiply(a, b) { return a * b; } console.log(multiply(4, 5)); // 20

Function Expression

const multiply = function(a, b) { return a * b; }; console.log(multiply(4, 5)); // 20

Both give the same output, but the syntax is different.

Key Differences Between Function Declaration and Function Expression

Here is the easiest way I understand it:

Function Declaration	Function Expression
Defined using the function keyword with a name	Function is stored in a variable
Can be called before it is written in code	Usually cannot be called before it is defined
Looks more direct and simple	Useful when working with variables and callbacks

The Basic Idea of Hoisting

When I first heard the word hoisting, it sounded difficult, but at a very basic level, the idea is simple.

Hoisting means JavaScript moves some declarations to the top before running the code.

You do not need to go deep into the technical part right now. The beginner-friendly thing to remember is this:

• function declarations can usually be called before they appear in the code

• function expressions usually cannot

Example with Function Declaration

sayHello(); function sayHello() { console.log("Hello!"); }

This works.

Example with Function Expression

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

This gives an error.

Why?

Because in a function expression, the variable exists, but the function value is not ready to use before that line runs.

So the simple takeaway is:

• function declarations are hoisted in a more usable way

• function expressions are not ready before assignment

A Simple Way to Remember Hoisting

I remember it like this:

• A function declaration feels like JavaScript already knows about the full function

• A function expression feels like JavaScript has to wait until the variable gets the function value

That is enough for a beginner-level understanding.

When Should We Use Each Type?

This is the practical question.

Use function declaration when:

• you want a simple and clear function

• the function is a main part of your code

• you want readability

Example:

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

This looks clean and easy to read.

Use function expression when:

• you want to store a function in a variable

• you want to pass a function as a value

• you are working in situations where functions are treated like data

Example:

const greetUser = function(name) { return "Hello, " + name; };

When I was starting out, I found this simple rule helpful:

• use function declaration for normal reusable functions

• use function expression when assigning a function to a variable

Assignment Example

Let’s do the same task in both ways.

Function Declaration That Multiplies Two Numbers

function multiplyNumbers(a, b) { return a * b; } console.log(multiplyNumbers(3, 4)); // 12

Function Expression with the Same Logic

const multiplyNumbersExp = function(a, b) { return a * b; }; console.log(multiplyNumbersExp(3, 4)); // 12

Both functions do the same thing, but they are written differently.

Try Calling Them Before Defining

Now let’s see the difference clearly.

Calling Function Declaration Before Defining

console.log(subtract(10, 4)); function subtract(a, b) { return a - b; }

This works.

Calling Function Expression Before Defining

console.log(subtractExp(10, 4)); const subtractExp = function(a, b) { return a - b; };

This gives an error.

This is one of the biggest practical differences between the two.

Comparison Table

Here is a simple comparison table for quick revision:

Feature	Function Declaration	Function Expression
Syntax	Defined directly with a name	Stored in a variable
Hoisting	Can be called before definition	Cannot be used before definition
Readability	Very clear for beginners	Slightly less direct at first
Common use	Regular reusable functions	Variable-based function usage

Simple Function Call Flow

Here is a very basic idea of how it works:

Function Declaration | |-- JavaScript reads the function |-- Function can be called |-- Code runs Function Expression | |-- JavaScript reads the variable |-- Function is assigned later |-- Then it can be called

Easy Way to Remember

This is the easiest way I would explain it to another beginner:

• function declaration = direct way to define a function

• function expression = function stored inside a variable

• declaration can usually be called before definition

• expression usually cannot

Final Thoughts

When I first saw function declarations and function expressions, they looked almost the same to me. But after trying both with simple examples, the difference became much clearer.

If you are just starting, don’t overcomplicate it. First, understand that both are ways to create functions. Then remember the main difference: hoisting and syntax.

Once that becomes clear, using them in real programs feels much easier.