Function Declaration vs Function Expression: What’s the Difference?

When learning JavaScript, one concept that appears very early is functions. Functions are an important part of programming because they allow us to reuse code instead of repeating it again and again.

A function is simply a block of code designed to perform a specific task. Once a function is defined, it can be called whenever needed.

For example, if a program needs to add two numbers multiple times, it is easier to write that logic once inside a function and reuse it.

What Functions Are and Why We Need Them

Without functions, we might write code like this repeatedly:

let result1 = 5 + 3;
let result2 = 10 + 7;
let result3 = 4 + 6;

Instead, we can create a function that handles the addition.

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

Now we can reuse the same logic whenever we want.

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

Functions help make code cleaner, easier to manage, and reusable.

Function Declaration

A function declaration is the most common way beginners learn to write functions.

The syntax looks like this:

function functionName(parameters) {
  // code
}

Example:

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

Calling the function:

console.log(add(4, 6));

Output:

10

In this case:

• add is the function name

• a and b are parameters

• return sends the result back

Function Expression

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

In this approach, the function is assigned to a variable.

Example:

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

Calling the function works the same way:

console.log(add(4, 6));

Output:

10

The main difference is that the function does not stand alone. Instead, it is stored inside a variable.

Declaration vs Expression

Looking at both together makes the difference clearer.

Function Declaration

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

Function Expression

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

Both perform the same task. The difference lies in how the function is defined and how JavaScript handles it internally.

Basic Idea of Hoisting

One key difference between the two approaches relates to something called hoisting.

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

For beginners, the easiest way to understand this is by seeing what happens when a function is called before it is written in the code.

Function Declaration Example

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

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

Output:

8

This works because function declarations are hoisted. JavaScript knows about the function even before it appears in the code.

Function Expression Example

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

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

This will cause an error.

Why?

Because the variable add has not been assigned a function yet when the code tries to call it.

So the simple takeaway is:

• Function declarations can be used before they appear in the code

• Function expressions cannot

When to Use Each Type

Both approaches are valid and commonly used.

Function Declarations are useful when:

• the function needs to be available throughout the program

• the function represents a core piece of logic

Function Expressions are useful when:

• the function is stored inside a variable

• the function is passed as a value

• the function is used in certain contexts like callbacks

For beginners, both are important to understand because they appear frequently in JavaScript code.

Assignment for Practice

Try the following exercises to understand the difference.

1. Function Declaration

Create a function that multiplies two numbers.

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

Call the function:

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;
};

Call it again:

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

Output:

20

3. Try Calling Before Definition

Try this example.

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

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

This will work.

Now try the same with a function expression.

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

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

This will produce an error.

Observing this behavior helps understand the difference between the two.

Final Thoughts

Functions are one of the most important parts of JavaScript because they allow developers to reuse logic instead of repeating code.

There are two common ways to define functions:

• Function Declaration

• Function Expression

Both achieve the same result, but they behave slightly differently, especially when it comes to hoisting.