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

When we first start learning JavaScript, we write code step by step.

But after writing the same logic again and again, we realize something important…

“Why am I repeating this code?”

That’s where functions come into the story.

Let me explain it with a small story.

The Story of Repeating Work

Imagine you are helping a friend run a small tea shop .

Every customer asks for tea.
The process is always the same:

1. Boil water

2. Add tea leaves

3. Add milk

4. Add sugar

5. Serve

Now imagine writing this process every single time a customer orders tea.

That would be exhausting. So instead, you create a standard recipe.

Whenever someone orders tea, you simply say:

“Follow the tea recipe.”

That recipe is exactly what a function is in programming.

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

A Simple Example of a Function

Let's say we want to add two numbers.

Without a function:

let result1 = 5 + 3;
let result2 = 10 + 2;
let result3 = 8 + 7;

We keep repeating the same logic.

Now with a function:

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

console.log(add(5, 3));
console.log(add(10, 2));
console.log(add(8, 7));

Now the code is clean, reusable, and easier to manage.

But here comes the interesting part…

In JavaScript, functions can be written in two different ways.

1. Function Declaration
2. Function Expression

Let’s explore both.

1. Function Declaration

A function declaration defines a function using the function keyword followed by a name.

Syntax

function functionName(parameters) {
  // code
}

Example

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

console.log(greet("Mahesh"));

Output:

Hello Mahesh

Here:

• greet is the function name

• name is a parameter

• the function returns a greeting message

This is the most common and beginner-friendly way to create functions.

2. Function Expression

A function expression is when a function is stored inside a variable.

Syntax

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

Example

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

console.log(greet("Mahesh"));

Output:

Hello Mahesh

Here the function does not need its own name because it is stored in a variable.

You can think of it like:

“The variable now holds a function.”

Side-by-Side Comparison

Feature	Function Declaration	Function Expression
Definition style	Declared using function keyword	Function stored inside a variable
Requires name	Yes	Not always
Hoisting support	Yes	No
Usage style	Traditional	Flexible

Example comparison:

Function Declaration

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

Function Expression

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

Both do the same job, but they behave differently in one key area… Hoisting.

The Simple Idea of Hoisting

Hoisting is one of those JavaScript behaviors that confuses beginners.

Let’s understand it in a simple way.

Imagine JavaScript reads your code and moves some things to the top behind the scenes.

This is called hoisting.

Function Declaration with Hoisting

This works perfectly:

sayHello();

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

Even though the function is written below, JavaScript allows it.

Why?????

Because function declarations are hoisted.

Function Expression with Hoisting

This will cause an error:

sayHello();

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

Error:

Cannot access 'sayHello' before initialization

Why??????

Because function expressions are NOT hoisted like declarations.

The variable exists, but the function isn't assigned yet.

When Should You Use Each?

Use Function Declarations when:

• You want cleaner and simpler code

• The function should be available anywhere in the file

• You want better readability

Example:

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

---

Use Function Expressions when:

• You want to assign functions to variables

• You want more control over when the function is created

• You are using modern JavaScript patterns

Example:

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

Function expressions are also commonly used with:

• callbacks

• event handlers

• arrow functions