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

In JavaScript, we often need to perform the same task multiple times. Writing the same code again and again is not efficient.

To solve this, we use functions.

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

What is a Function and Why Do We Need It?

A function is a group of statements that can be reused whenever needed.

Why functions are useful:

• Avoid repeating code

• Make code clean and organized

• Easy to debug

• Improve readability

Simple Example

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

greet();
greet();

Output:

Hello!
Hello!

---

Function Declaration Syntax

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

Syntax:

function functionName() {
  // code
}

Example:

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

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

//output: 5

---

Function Expression Syntax

In function expressions, we store a function inside a variable.

Syntax:

const functionName = function() {
  // code
};

Example:

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

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

//ouput: 6

---

Function Declaration vs Function Expression

Feature	Function Declaration	Function Expression
Syntax	function add() {}	const add = function() {}
Hoisting	Yes	No
Usage before define	Works	Does NOT work
Readability	Simple	Flexible

Key Differences

Function Declaration:

• Defined using function keyword

• Can be called before definition

Function Expression:

• Stored in a variable

• Must be defined before calling

---

What is Hoisting?

Hoisting means:

JavaScript moves function declarations to the top during execution.

Example of Hoisting (Declaration)

greet();

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

Output: Hello from declaration

Works because function declarations are hoisted.

Example of Hoisting (Expression)

greet();

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

Output: Error: Cannot access before initialization

Function expressions are NOT hoisted like declarations.

---

Function Call Execution Flow

Call function 
     ↓ 
Arguments passed 
     ↓ 
Function executes 
     ↓ 
Return value sent back 
     ↓ 
Result used

---

When to Use Function Declaration

Use function declaration when:

• You want simple and readable code

• Function is reused in many places

• You want hoisting behavior

Example:

function calculateArea(r) {
  return 3.14 * r * r;
}

When to Use Function Expression

Use function expression when:

• You want more control

• You want to assign functions conditionally

• You use callbacks or event handlers

Example:

const handleClick = function() {
  console.log("Button clicked");
};

---

Conclusion

Functions are one of the most important concepts in JavaScript. They help us write reusable, clean, and organized code.

Understanding the difference between function declaration and expression helps you to avoid errors and write better programs.

Functions are the building blocks of JavaScript, and mastering them is the first step toward writing professional-level code.