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

In JavaScript, functions are one of the most important building blocks of any program. A function is essentially a reusable block of code designed to perform a specific task. Instead of writing the same logic multiple times, we can define it once inside a function and reuse it whenever needed.

For example, suppose we want to add two numbers in different parts of a program. Instead of repeatedly writing the same calculation, we can create a function that performs the addition.

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

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

Here, the function add takes two inputs and returns their sum. This makes the code cleaner, easier to maintain, and more understandable.

JavaScript provides multiple ways to define functions, but two of the most common approaches are:

• Function Declaration

• Function Expression

Function Declaration

A function declaration defines a named function using the function keyword. Once declared, a function can be called anywhere in the same scope. Function declarations are commonly used for general-purpose reusable logic in programs.

Syntax:

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

Example:

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

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

Here, function tells JavaScript that we are defining a function. multiply is the function name. a & b are parameters. This function returns the multiplication of a & b.

Function Expression

A function expression is when a function is created and assigned to a variable.

Syntax:

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

Example:

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

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

At first, a variable named multiply is created. Then the function is assigned to that variable. Lastly, the function is called to multiply the given arguments. Although the function performs the same task as the earlier example, the way it is defined internally is different.

Declaration VS Expression

Feature	Function Declaration	Function Expression
Definition style	Uses function name() syntax	Function assigned to a variable
Function name	Always named	Can be anonymous
Hoisting behavior	Fully hoisted	Not fully hoisted
Usage style	Often used for reusable utilities	Often used for callbacks or dynamic functions

Example:

Function Declaration

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

Function Expression

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

Execution:

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

Both functions will produce the same result, but JavaScript treats these two types differently during the code execution phase. Now, let’s learn the most important difference, which is hoisting.

Understanding Hoisting

JavaScript processes code in a way where certain declarations are moved to the top of their scope before execution. This behavior is called hoisting. Simply, it means some functions can be used before they appear in the code, while others cannot.

Function Declaration Hoisting

Function declarations are fully hoisted.

Example:

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

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

Even though the function appears later in the file, JavaScript already knows about it because it was hoisted during the compilation stage.

Function Expression Hoisting

Function expressions behave differently.

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

const add = function(a, b) {
  return a + b; // Uncaught ReferenceError: add is not defined
};

This will produce an error because only the variable declaration is hoisted, not the function assignment.

JavaScript internally treats it roughly like this:

const add;

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

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

Since the function isn't assigned yet when it is called, JS throws an error.

When Should You Use Each Type?

Both types are valid and commonly used. The choice depends on the situation.

Use Function Declaration When

• The function represents the core logic of your program.

• You want the function to be available anywhere in the scope.

• The function should be easy to reuse across the file.

Use Function Expression When

• The function is used as a value.

• You want to pass the function as an argument to another function.

• You want to create functions dynamically.

Function expressions are also commonly used in modern JavaScript practices, especially with arrow functions.

Conclusion

Functions allow developers to organize code into reusable, modular units, making programs easier to manage and maintain. JavaScript provides multiple ways to define functions, but function declarations and function expressions are the most commonly used.

The main technical difference lies in hoisting. Function declarations are fully hoisted, allowing them to be called before they appear in code. Function expressions are not fully hoisted because the function is assigned only when the variable is initialized.

Understanding this difference helps developers avoid bugs and write clearer JavaScript code. In practice, declarations are often used for core logic, while expressions are frequently used for callbacks, temporary functions, or functional programming patterns.