Functions are one of the most important concepts in JavaScript. They allow us to write reusable blocks of code that perform specific tasks. Instead of writing the same code again and again, we can place it inside a function and call it whenever needed.

For example, if we want to add two numbers multiple times, we can create a function for it.

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

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

Here, the function add() can be reused anywhere in the program.

In JavaScript, there are two common ways to create functions:

1. Function Declaration

2. Function Expression

Let’s understand both.

---

1. Function Declaration

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

Syntax

function functionName(parameters) {
  // code to execute
}

Example

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

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

How it Works

• function keyword starts the function

• greet is the function name

• name is a parameter

• The function returns a greeting message

Function declarations are simple and commonly used in many JavaScript programs.

---

2. Function Expression

A function expression means storing a function inside a variable.

Syntax

const functionName = function(parameters) {
  // code to execute
};

Example

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

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

How it Works

• A variable (greet) is created

• A function is assigned to that variable

• The function can be called using the variable name

Here the function does not necessarily need a name because the variable already refers to it.

---

Side-by-Side Comparison

Function Declaration

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

Function Expression

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

Both perform the same task, but they behave slightly differently in JavaScript.

---

Key Differences

Feature	Function Declaration	Function Expression
Definition	Defined using function keyword with a name	Function stored inside a variable
Hoisting	Fully hoisted	Not fully hoisted
Usage	Can be called before definition	Must be defined before calling
Common Usage	General reusable functions	Callbacks and dynamic functions

---

Understanding Hoisting (Simple Explanation)

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

This affects function declarations and expressions differently.

---

Hoisting with Function Declaration

This works even before the function is defined.

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

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

Output:

5

JavaScript already knows about the function before it runs the code.

---

Hoisting with Function Expression

This does NOT work before the definition.

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

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

This will produce an error, because the variable add is not ready yet.

So function expressions must be defined before use.

---

When Should You Use Each?

Use Function Declaration When

• You want simple reusable functions

• The function will be used in multiple places

• You want cleaner structure in your program

Example:

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

---

Use Function Expression When

• You want to assign functions to variables

• You want to pass functions as arguments

• You are working with callbacks or event handlers

Example:

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

---

Small Visual Comparison

Function Declaration
---------------------
function add(a,b){
 return a + b
}

Function Expression
---------------------
const add = function(a,b){
 return a + b
}

---

Assignment Practice

Try this exercise to understand the difference.

1. Write a Function Declaration

Create a function that multiplies two numbers.

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

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

---

2. Write the Same Function Using Function Expression

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

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

---

3. Experiment With Hoisting

Try calling the functions before defining them and observe what happens.

Example:

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

Check which one works and which one gives an error.

---

Final Thoughts

Both function declarations and function expressions are powerful ways to create functions in JavaScript.

• Function declarations are simple and hoisted

• Function expressions are flexible and often used with variables

As you continue learning JavaScript, you will notice that both styles are used in real-world projects. Understanding their differences helps you write cleaner and more predictable code.

---