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

Suppose you are writing a code to calculate the total marks of the students. Each student have marks in multiple subjects and so you need to calculate the total marks, umm by summing the marks of individual subjects.

let total = 80 + 75 + 90;
console.log(total);

Now imagine that if there are at least more than 100 students, then uh, it is not, uh viable to some in this way. Because writing the same logic again and again and for a long number of students is not easy at all. And sometimes. It is quite impossible if the number of students are too high. So writing the same logic again and again for each student would make the code repetitive and difficult to manage.

Instead of repeating the same code again and again, we can use a Reusable block of code which is known as function in case of any programming language as well as Javascript.

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

Example: Adding two numbers.

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

console.log(add(5, 3)); // 8

Instead of repeating the addition logic everywhere, we can reuse the function whenever we need it.

---

Function Declaration

We define a function using the function keyword and a function name.

function calculateTotal(marks1, marks2, marks3) {
  return marks1 + marks2 + marks3; //return statement
}

let totalMarks = calculateTotal(80, 75, 90);

console.log(totalMarks); //245

/*
calculateTotal -> Function name
marks1, marks2, marks3 -> parameters
*/

Now we can reuse the same function for every student.

calculateTotal(70, 65, 80);
calculateTotal(88, 92, 85);

---

Function Expression

stores a function inside a variable.

const calculateTotal = function(marks1, marks2, marks3) {
  return marks1 + marks2 + marks3;
};

let totalMarks = calculateTotal(80, 75, 90);

console.log(totalMarks);

NOTE:

• The function is assigned to a variable

• The variable name acts as the function name.

---

Function Declaration vs Function Expression

Feature	Function Declaration	Function Expression
Syntax	function name(){}	const name = function(){}
Name	Has a function name	Stored in a variable
Hoisting	Fully hoisted	Not hoisted the same way
Usage	General reusable functions	Functions stored in variables

---

Hoisting (Simple Idea)

In JavaScript, function declarations are hoisted, meaning they can be used before they are defined.

Function Declaration Example

console.log(calculateTotal(80, 75, 90));

function calculateTotal(m1, m2, m3) {
  return m1 + m2 + m3;
}

This works.

---

Function Expression Example

console.log(calculateTotal(80, 75, 90));

const calculateTotal = function(m1, m2, m3) {
  return m1 + m2 + m3;
};

This produces an error because the function expression is not hoisted the same way.

---

Quick Practice

console.log(multiply(4, 5)); //✅ hoisted as Function declaration

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

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

//console.log(multiplyNumbers(4, 5)); //❌ error as Function expresion not hoisted
const multiplyNumbers = function(a, b) {
  return a * b;
};

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