Functions are one of the most important concepts in JavaScript. They allow us to group a set of instructions into a reusable block of code so we don't have to repeat the same logic again and again. Instead of rewriting code for every similar task, we can define a function once and call it whenever we need it.

For example, imagine an office printer. When someone presses the print button, the printer automatically processes the document and prints it. The user doesn’t need to know every internal step — they just press the button to perform the task. Functions work the same way in programming. In JavaScript, we can create functions in different ways, and two common methods are Function Declarations and Function Expressions. Understanding the difference between them helps developers write clearer and more predictable code.

---

What functions are, and why we need them?

A function is a reusable block of code that performs a specific task. Instead of writing the same logic multiple times in different parts of a program, we can place that logic inside a function and call it whenever we need it. This helps make our code cleaner, easier to read, and easier to maintain.

For example, imagine we need to add two numbers in different places in our program.

Without a function:

let result1 = 5 + 3;
console.log(result1);

let result2 = 10 + 4;
console.log(result2);

Here we repeat the same logic again. Instead, we can create a function.

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

console.log(add(5, 3));
console.log(add(10, 4));

Now the logic is written once and reused multiple times. This is why functions are important—they help developers avoid repetition, organize code better, and make programs easier to manage.

---

Function Declaration Syntax

A Function Declaration is the most common way to create a function in JavaScript. It uses the function keyword followed by a function name, parameters (if any), and a block of code.

Syntax

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

Example

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

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

Here:

• add is the function name

• a and b are parameters

• return sends the result back

When we call add(5, 3), the function, it runs and returns the sum.

---

Function Expression Syntax

A Function Expression is when a function is assigned to a variable. The function itself does not stand alone; it becomes the value of a variable.

Syntax

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

Example

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

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

Here, the function is stored inside the variable add. We call it using the variable name just like we did before.

Even though both approaches create functions, they behave differently in some situations, which we will explore next.

---

Key Differences Between Function Declaration and Function Expression

Although Function Declarations and Function Expressions both create functions, they differ in how they are written and how JavaScript treats them.

Comparison Table

Feature	Function Declaration	Function Expression
Definition	Defined using function with a name	Function assigned to a variable
Syntax	function greet(){}	const greet = function(){}
Naming	Must have a function name	Can be anonymous
Hoisting	Fully hoisted	Not hoisted
Calling before definition	Works	Causes error

---

Code Example

Function Declaration

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

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

//Output: 6

This works because function declarations are hoisted, meaning JavaScript knows about the function before the line where it is written.

---

Function Expression

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

const add = function(a, b) {
  return a + b;
};
//ReferenceError: Cannot access 'add' before initialization:

This happens because the variable add is not initialized until that line of code runs.

---

What is Hoisting?

Before JavaScript runs your code, it first scans the entire file during the compile phase. During this step, JavaScript prepares memory for variables and functions. This process is called hoisting.

In simple terms, hoisting means JavaScript moves declarations to memory before the code starts executing.

When JavaScript scans the code:

• Variables declared with var are stored in memory first and initialized with undefined.

• Functions declared with the function keyword are stored in memory with their entire function body.

• Variables declared with let and const are also hoisted, but they are not initialized immediately, so they cannot be used before their declaration.

• Function expressions are not available before the variable is initialized because they depend on the variable (let, const, or var) that stores them.

Example

console.log(a); 

var a = 10;

Output:

undefined

This happens because JavaScript internally treats it like this:

var a;        // memory allocation during hoisting
console.log(a);
a = 10;

Function Declaration Example

sayHello();

function sayHello() {
  console.log("Hello");
}

This works because the entire function is stored in memory during hoisting.

Function Expression Example

sayHello();

const sayHello = function() {
  console.log("Hello");
};

This will cause an error because the variable sayHello is not initialized yet, so the function is not available at that moment.

This is the main reason why Function Declarations behave differently from Function Expressions.

---

When to Use Each Type

Both Function Declarations and Function Expressions are useful, and developers choose between them depending on the situation.

Use Function Declaration When

Use a function declaration when you want to define a general reusable function that will be used in multiple places in your program. Since function declarations are hoisted, they can also be called before their definition, which can make the code structure more flexible.

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

console.log(calculateTotal(100, 18));

This approach is commonly used for main utility functions or core logic in an application.

---

Use Function Expression When

Use a function expression when you want to store a function inside a variable, pass it as an argument, or define functions dynamically. This is very common when working with callbacks, event handlers, or conditional logic.

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

console.log(calculateTotal(100, 18));

Function expressions are also commonly used in modern JavaScript when working with callbacks, array methods, or functional patterns.

---

Tip

• Use Function Declarations for main reusable functions.

• Use Function Expressions when assigning functions to variables or using them as callbacks.

---

Practice Exercise

Try implementing both types of functions yourself to understand how they work.

1. Function Declaration

Write a function declaration that multiplies two numbers and prints the result.

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

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

---

2. Function Expression

Now write the same logic using a function expression, where the function is stored inside a variable.

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

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

---

3. Call Both Functions

Call both functions and print their results to make sure they work correctly.

This small exercise will help you see how function declarations define functions directly, while function expressions assign functions to variables.

---

Conclusion

Both Function Declarations and Function Expressions allow us to create reusable blocks of code in JavaScript. While they may look similar, the main difference is in how they are defined and used. A function declaration defines a function directly using the function keyword, while a function expression stores a function inside a variable.

In practice, developers use function declarations for general reusable functions and function expressions when functions need to be assigned to variables or used dynamically. Understanding the difference between these two approaches helps you write clearer and more structured JavaScript code.