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

Let’s imagine a situation where you need to add numbers 10 different times in your program. Without using functions, you would have to write the addition code again and again for every calculation. This would make the code repetitive and harder to manage. This is where functions become useful.

1. What is a Function?

A function is a reusable block of code designed to perform a specific task. Instead of writing the same logic multiple times, we can define it once inside a function and call it whenever we need it.
Functions help make code cleaner, reusable, and easier to maintain.

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

addition(5, 10);
addition(50, 100);
addition(55, 50);
addition(25, 110);
addition(52, 100);
addition(53, 10);

In this example, the addition function is defined once, but it can be used many times with different values. This saves time and keeps the code organized.

There are two ways of declaring a function:
a. Function Declaration.
b. Function Expression.

a. Function Declaration

A function can be declared using the function keyword followed by the function name, parameters, and a function body. Syntax

function functionName (parameter 1, parameter 2){
    // Code to be executed
    return value;
}

function multiply (a, b) {
    return a * b;
}
multiply(10 , 20) // Output: 200 

b. Function Expression

A function expression is a function stored in a variable.

// Standard Function
function multiply(a, b) {
  return a  b;
}

// Function Expression
const multiply = function(a, b) {
  return a  b;
};

By using function expression a user can create an anonymous function (function without name), Named function also.

2. Key Differences from Function Declarations

Feature	Function Expression	Function Declaration
Hoisting	Not hoisted; can only be used after definition.	Hoisted; can be called before its definition in the code.
Name	Can be anonymous (no name).	Must have a name.
Usage	Used for callbacks, IIFEs, and conditional definitions.	Best for general-purpose, reusable functions.
Scope	Block-scoped if declared with let or const.	Function-scoped (or block-scoped in strict mode).

3. Basic idea of hoisting Hoisting

Hoisting is a concept in JavaScript where variable and function declarations are moved to the top of their scope during the execution phase. Because of this, a variable or function can sometimes be used before it is declared in the code.

a. What works before definition

Function Declaration: In JavaScript, a function can be called even before it is defined in the code.

greet();

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

Var (Variable): In Javascript a variable which is declared using var key can be accessed but there is a issue it will return undefined.

console.log(name);
var name = "Piyush";

// Output: 
Undefined

b. What didn't Work

Function expressions: are not hoisted in the same way. Only the variable is hoisted, not the function itself.

greet();

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

This will cause an error because when greet() is called, the function has not been assigned yet.

Variables with let and const

let and const are hoisted but cannot be used before initialization.

console.log(a);
let a = 10;

This gives a ReferenceError because the variable is in the Temporal Dead Zone (TDZ) until it is declared.

4. When to Use Each Type of Function

Both Function Declarations and Function Expressions are used to create functions in JavaScript, but they are used in different situations depending on how you want your code to behave.

a. When to Use Function Declarations

Use function declarations when the function represents a main or reusable piece of logic in your program. They are ideal when:

The function should be accessible anywhere in the scope
You want to call the function before it appears in the code
The function represents an important utility or core feature

calculateTotal(10, 20);

function calculateTotal(a, b) {
  return a + b;

b. When to Use Function Expressions

Use function expressions when you want to store a function inside a variable or control when the function becomes available. They are ideal when:

You want to pass functions as values
You want to assign functions dynamically
You want to avoid accidental hoisting behavior

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

multiply(5, 10);

5. Assignments

// Calling both functions BEFORE definition
console.log("Function Declaration before definition:", multiplyDecl(4, 5));

try {
  console.log("Function Expression before definition:", multiplyExpr(4, 5));
} catch (error) {
  console.log("Function Expression before definition gives error:", error.message);
}


// Function Declaration
function multiplyDecl(a, b) {
  return a * b;
}


// Function Expression
var multiplyExpr = function(a, b) {
  return a * b;
};


// Calling both functions AFTER definition
console.log("Function Declaration after definition:", multiplyDecl(6, 7));
console.log("Function Expression after definition:", multiplyExpr(6, 7));

6. Conclusion

Understanding function declarations and function expressions helps you write more structured and predictable JavaScript code. While both are used to create functions, their behavior—especially with hoisting—is different. Knowing when to use each type makes your code cleaner, more flexible, and easier to maintain.