Introduction -

Functions are one of the most important building blocks in JavaScript. They allow us to group code into reusable pieces so we don’t have to repeat the same logic multiple times.

Instead of rewriting the same operations again and again, we can place the logic inside a function and simply call it whenever needed.

In this article, we’ll explore two common ways to create functions in JavaScript: function declarations and function expressions.

What Are Functions and Why Do We Need Them?

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

For example, imagine we want to add two numbers multiple times in our program. Instead of writing the addition logic repeatedly, we can create a function.

Example:

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

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

Here the function takes two values, adds them, and returns the result.

Functions help make code:

• Reusable

• Organized

• Easier to maintain

Function Declaration

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

Example:

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

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

Here:

• multiply is the function name

• The function multiplies two numbers and returns the result

Function declarations are commonly used when defining main functions in a program.

Function Expression

A function expression stores a function inside a variable.

Example:

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

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

Here:

• The function does not have its own name

• It is stored inside the variable multiply

This approach is often used when functions need to be assigned to variables or passed around.

---

Comparing Both Approaches

Feature	Function Declaration	Function Expression
Definition	Defined using function keyword	Function stored in a variable
Hoisting	Works before definition	Does not work before definition
Usage	Common for main program functions	Often used for dynamic or assigned functions

---

Understanding Hoisting (Simple Idea)

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

Because of this, function declarations can be called even before they appear in the code.

Example:

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

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

This works because the function declaration is hoisted.

Now look at the same example using a function expression:

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

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

This will cause an error because the variable is not initialized yet.

---

When Should You Use Each Type?

Both approaches are useful depending on the situation.

Situation	Recommended
Defining main reusable functions	Function Declaration
Storing functions in variables	Function Expression

In simple terms:

• Use declarations for general functions

• Use expressions when assigning functions to variables

---

Practice Exercise

Function Declaration

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

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

Function Expression

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

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

Try Calling Before Definition

Experiment with calling both functions before they are defined and observe the difference.

Diagrams to Understand This Concept

To better visualize the concept, you can use:

• Comparison table: Function Declaration vs Function Expression

• Simple execution flow diagram of a function call

These diagrams make it easier to understand how JavaScript handles functions internally.

Conclusion

Functions are essential for writing clean and reusable JavaScript code. Understanding the difference between function declarations and function expressions helps developers write more flexible and predictable programs.

While both approaches achieve similar results, their behavior—especially with hoisting—can affect how and when functions are used.

Mastering these basics builds a strong foundation for more advanced JavaScript concepts.