When I first started learning JavaScript, I noticed that I was repeating the same code again and again. For example, if I wanted to add two numbers multiple times, I had to write the logic every time.

That’s when I learned about functions.

Functions allow us to write a block of code once and reuse it whenever we need it. In this article, I’ll explain:

• What functions are and why we need them

• Function declaration syntax

• Function expression syntax

• The difference between them

• A simple idea of hoisting

• When to use each type

Let’s start with the basics.

---

What Are Functions?

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

Instead of writing the same logic again and again, we put it inside a function and call it whenever needed.

Example without a function

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

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

Here we are repeating the addition logic.

Using a function

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

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

Now we wrote the logic once, and we can reuse it many times.

That’s the power of functions.

---

Function Declaration Syntax

One way to create a function is called a function declaration.

Syntax

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

Example

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

greet("Dipan");

Output:

Hello Dipan

Here:

• function → keyword used to create a function

• greet → function name

• name → parameter

• The code inside {} runs when the function is called

---

Function Expression Syntax

Another way to create a function is called a function expression.

Here, we store a function inside a variable.

Syntax

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

Example

const greet = function(name) {
  console.log("Hello " + name);
};

greet("Dipan");

Output:

Hello Dipan

Even though it looks slightly different, it works very similarly.

The main difference is how the function is created and stored.

---

Declaration vs Expression (Side by Side)

Let’s compare them directly.

Function Declaration

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

Function Expression

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

Key difference:

• Declaration creates the function directly

• Expression stores the function inside a variable

Both can do the same work, but they behave differently in one important case: hoisting.

---

The Basic Idea of Hoisting

In JavaScript, some things are available before the line where they are written. This behavior is called hoisting.

Don’t worry about the internal mechanics. Just remember what works and what doesn’t.

Function Declaration (Works before definition)

sayHello();

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

This works because function declarations are hoisted.

---

Function Expression (Does NOT work before definition)

sayHello();

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

This will give an error.

Why?

Because the variable sayHello exists, but the function is not assigned yet.

So the rule is simple:

✔ Function declarations can be called before they are defined

❌ Function expressions cannot

---

When Should You Use Each?

Both types are useful in different situations.

Use Function Declarations when:

• You want simple reusable functions

• The function should be available anywhere in the file

• You want cleaner and easier-to-read code

Example:

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

---

Use Function Expressions when:

• You want to store functions inside variables

• You want to pass functions as arguments

• You want better control over when the function is created

Example:

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

Function expressions are also commonly used with callbacks and modern JavaScript patterns.