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

Functions are one of the most important parts of JavaScript. They allow us to write reusable blocks of code that can be used many times in a program.

In JavaScript, functions can be created in two common ways:

• Function Declaration

• Function Expression

Understanding the difference between them helps you write cleaner and more predictable code.

1. What Functions Are and Why We Need Them

A function is a block of code designed to perform a specific task.

Instead of writing the same code many times, we can create a function and reuse it.

Example without a function:

let result1 = 5 + 3;
let result2 = 10 + 4;

Using a function is better:

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

console.log(add(5, 3));
console.log(add(10, 4));

Output:

8
14

Here, the function reuses the same logic to add numbers.

2. Function Declaration Syntax

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

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 the function name

• a and b are parameters

3. Function Expression Syntax

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

Syntax:

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

Example:

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

console.log(add(2, 3));

Output:

5

Here:

• The function does not have a name

• It is assigned to the variable add

4. Key Differences Between Declaration and Expression

Let’s compare them side by side.

Function Declaration

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

Function Expression

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

Feature	Function Declaration	Function Expression
Structure	Uses function name()	Stored in a variable
Name required	Yes	Optional
Hoisting	Fully hoisted	Not fully hoisted
Common usage	General functions	Callbacks and dynamic functions

Both work similarly when calling the function.

Example:

greet();

5. Basic Idea of Hoisting

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

Function Declaration Hoisting

Function declarations can be used before they appear in the code.

Example:

greet();

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

Output:

Hello

This works because the function is hoisted.

Function Expression Hoisting

Function expressions cannot be used before they are defined.

Example:

greet();

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

This will cause an error.

Because the variable exists but the function is not yet assigned.

6. When to Use Each Type

Use Function Declaration When:

• You want a simple reusable function

• The function should be available everywhere in the file

• The function represents a main part of the program

Example:

function calculateArea(width, height) {
  return width * height;
}

Use Function Expression When:

• You want to store a function inside a variable

• You are passing functions as arguments

• You are using callbacks

Example:

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

Function expressions are very common in modern JavaScript.