Functions are one of the most important concepts in JavaScript. They allow us to write reusable blocks of code that can be executed whenever we need them.

Instead of repeating the same logic multiple times, we can place that logic inside a function and simply call it whenever required.

For example, imagine you need to add two numbers in multiple places in your program. Instead of rewriting the addition logic again and again, you can create a function once and reuse it.

---

What is a Function?

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

It runs only when it is called (invoked).

Example:

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

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

Here:

• add is the function name

• a and b are parameters

• return gives back the result

---

Function Declaration

A function declaration defines a named function using the function keyword.

Syntax

function functionName(parameters) {
  // code
}

Example

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

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

Output:

Hello Sayantan

Key Characteristics

• Defined using the function keyword

• Must have a name

• Can be called before or after its definition (because of hoisting)

---

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("Sayantan"));

Output:

Hello Sayantan

Key Characteristics

• Function is assigned to a variable

• Can be anonymous (no name)

• Cannot be called before it is defined

---

Side-by-Side Comparison

Function Declaration

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

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

Function Expression

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

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

Both perform the same task, but they behave differently internally.

Comparison table -

---

Hoisting (Simple Explanation)

Hoisting means JavaScript moves declarations to the top of the scope during execution.

Function Declaration and Hoisting

Function declarations are fully hoisted.

This means we can call them before they are written in the code.

Example:

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

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

This works because JavaScript already knows about the function.

---

Function Expression and Hoisting

Function expressions are not hoisted in the same way.

Example:

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

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

This will produce an error:

ReferenceError: Cannot access 'add' before initialization

Because the variable add is not initialized yet.

---

Key Differences

Feature	Function Declaration	Function Expression
Syntax	function name() {}	const name = function() {}
Hoisting	Fully hoisted	Not usable before definition
Naming	Must have a name	Can be anonymous
Usage	Good for general reusable functions	Useful for dynamic logic and callbacks

---

When Should You Use Each?

Use Function Declarations when

• Writing general reusable functions

• You want the function available anywhere in the scope

• Code readability is important

Example:

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

---

Use Function Expressions when

• Assigning functions to variables

• Passing functions as arguments

• Creating callbacks

Example:

const numbers = [1,2,3];

numbers.map(function(num) {
  return num * 2;
});

---

Assignment Practice

1️⃣ Function Declaration

Write a function declaration that multiplies two numbers.

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

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

Output:

20

---

2️⃣ Function Expression

Write the same logic using a function expression.

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

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

Output:

20

---

3️⃣ Try Calling Before Definition

Try this experiment:

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

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

This works.

But this will fail:

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

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

Understanding this behavior helps explain how JavaScript handles functions internally.