Function Declaration vs Function Expression: What Is the Difference?

What Functions Are and Why We Need Them

A function is a reusable block of code that performs a specific task. Instead of repeating the same logic multiple times, we define it once and call it whenever needed.

Functions help us:

• Reduce repetition

• Improve readability

• Organize logic clearly

• Make code easier to maintain

For example, if we need to multiply two numbers multiple times, we can write the logic once inside a function.

Function Declaration

A function declaration defines a named function using the function keyword.

Syntax

function functionName(parameters) {
  // code
}

Example: Multiply Two Numbers Using a Function Declaration

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

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

Here:

• multiply is the function name.

• a and b are parameters.

• The function returns the product.

The function can now be reused anywhere in the same scope.

Function Expression

A function expression creates a function and assigns it to a variable.

Syntax

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

Example: Multiply Two Numbers Using a Function Expression

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

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

In this case:

• The function is stored inside a variable.

• The variable name is used to call the function.

• The function can be anonymous because the variable provides the reference.

Both approaches achieve the same result. The difference lies in how JavaScript handles them internally.

Comparing Declaration and Expression Side by Side

Function Declaration

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

Function Expression

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

Visually, they look similar. However, their behavior differs in one important concept called hoisting.

Basic Idea of Hoisting

Hoisting means JavaScript prepares certain declarations before executing the code. You can think of it as JavaScript scanning the file and registering function declarations first.

Calling a Function Declaration Before Defining It

console.log(declaredMultiply(2, 5));

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

This works. Even though the function appears after the call in the code, JavaScript allows it because function declarations are hoisted.

Calling a Function Expression Before Defining It

console.log(expressionMultiply(2, 5));

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

This causes an error. The variable expressionMultiply is not ready at the time of the call.

Important idea:

• Function declarations are fully hoisted.

• Function expressions behave like variables and cannot be used before they are defined.

You do not need to understand internal engine details. Just remember which one works before definition and which one does not.

Key Differences Summary

When to Use Each Type

Function declarations are useful when writing general-purpose functions that should be available throughout the scope. They are often used in traditional program structure.

Function expressions are useful when you want more control. They are commonly used when passing functions as arguments, assigning functions dynamically, or limiting access until after initialization.

In modern JavaScript, function expressions are frequently used with const to prevent accidental reassignment.

Summary

Both function declarations and function expressions create reusable blocks of code. The main difference is how JavaScript handles them during execution.

If you need flexibility to call a function before it appears in the file, use a function declaration.

If you want the function to behave like a controlled variable or be passed around easily, use a function expression.

Understanding this distinction helps you write clearer and more predictable JavaScript programs.