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

Why Do We Need Functions?

When writing JavaScript, you’ll often repeat the same logic multiple times. For example, imagine you frequently need to add two numbers.

Without functions, you might write something like this again and again:

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

Now imagine you need to do this 20 times in different parts of your program.

Instead of repeating the logic, we create a function.

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

Think of a function like a machine: you give it some input, it performs a task, and it returns an output.

Example:

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

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

Here, the function add takes two numbers and returns their sum. Instead of rewriting the logic, we just call the function whenever needed.

Function Declaration

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

Syntax

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

Example: multiplying two numbers.

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

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

Here’s what’s happening:

• function is the keyword used to define a function.

• multiply is the name of the function.

• a and b are parameters.

• The function returns the result of a * b.

Once declared, this function can be used anywhere in your program.

Function Expression

A function expression is another way to create functions. Instead of declaring a function directly, we store the function inside a variable.

Syntax

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

Example using the same multiplication logic:

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

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

The result is the same, but the way the function is defined is slightly different.

Here:

• A function is created.

• That function is assigned to the variable multiply.

This means the variable now holds the function.

Declaration vs Expression (Side-by-Side)

Let’s compare both approaches.

Function Declaration

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

Function Expression

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

Both functions work the same way when called:

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

But there are some important differences between them.

Key Differences

The biggest difference comes from how JavaScript loads and executes code.

1. Hoisting Behavior

Function declarations are hoisted, but function expressions are not.

Hoisting simply means JavaScript moves certain declarations to the top of the file before execution.

Let’s see what this means in practice.

Calling a Function Before It Is Defined

Example with Function Declaration

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

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

This works perfectly.

Output:

12

Even though the function is written later in the code, JavaScript already knows about it because function declarations are hoisted.

Example with Function Expression

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

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

This will cause an error.

Why?

Because the variable multiply does not contain the function yet when JavaScript tries to run the first line.

In simple terms:

• Function declaration → available before definition

• Function expression → available only after assignment

When Should You Use Each?

Both approaches are useful, and developers use them for different reasons.

Use Function Declarations When:

• You want functions available anywhere in the file

• The function represents a core piece of logic

• You want simpler, cleaner syntax

Example:

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

Use Function Expressions When:

• You want to store functions inside variables

• You want functions to behave like values

• You plan to pass the function as an argument later

Example:

let greet = function(name) {
  return "Hello " + name;
};

Function expressions are also common in callbacks and modern JavaScript patterns.