Function Declarations vs Function Expressions in JavaScript

When writing programs, you often need to perform the same task multiple times. Imagine calculating totals, greeting users, or validating input again and again. Writing the same code repeatedly would make programs messy and hard to maintain.

This is where functions become important. A function is simply a reusable block of code that performs a specific task. Instead of rewriting the logic every time, you define it once and call it whenever needed.

For example, if you want to add two numbers multiple times in a program, you could create a function for it.

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

Now whenever you need to add numbers, you just call the function.

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

This keeps the code clean and reusable. Functions help reduce repetition and make programs easier to understand.

Function Declaration

A function declaration is the most common way to define a function. It uses the function keyword followed by the function name.

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

Here, multiply is the function name, and a and b are parameters. When the function is called, the values passed in are used to perform the operation.

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

Output:

20

Function declarations are straightforward and easy to read, which is why they are often used for defining main functions in a program.

Function Expression

JavaScript also allows functions to be stored inside variables. This form is called a function expression.

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

Here the function does not have a name of its own. Instead, it is assigned to the variable multiply. The variable now holds the function, and we can call it like this:

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

The output will be the same as before.

Both function declarations and function expressions perform the same job. The difference lies in how they are defined and when they can be used.

Declaration vs Expression (Side by Side)

Function declaration:

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

Function expression:

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

Both functions behave the same way when called.

console.log(greet("Satyam"));

The result will be:

Hello Satyam

The main difference is related to something called hoisting.

A Simple Idea of Hoisting

Hoisting is a behavior in JavaScript where certain declarations are moved to the top of their scope during execution. You don’t need to worry about the internal details right now; the important thing is how it affects function calls.

With function declarations, you can call the function even before it appears in the code.

Example:

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

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

This works because the function declaration is hoisted.

However, the same is not true for function expressions.

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

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

This will cause an error because the variable add is not ready at the time the function is called.

So the simple rule is:

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

• Function expressions must be defined before they are used.

When Should You Use Each Type?

Both styles are useful, and developers often use them depending on the situation.

Function declarations are commonly used when you want to define reusable functions at the top level of a program. They are easy to read and can be called anywhere within their scope.

Function expressions are useful when functions need to be assigned to variables, passed as arguments, or used inside other functions. They are also commonly used with modern JavaScript patterns.

You will see function expressions frequently in things like event handlers, callbacks, and array methods.

Quick Comparison

Feature	Function Declaration	Function Expression
Syntax	Uses function name()	Function assigned to variable
Hoisting	Can be called before definition	Cannot be called before definition
Usage	General reusable functions	Callbacks and dynamic functions

Final Thought

Functions are one of the most fundamental building blocks in JavaScript. They allow developers to organize logic into reusable pieces, making programs easier to maintain and understand. Understanding the difference between function declarations and function expressions will help you write cleaner and more predictable code. As you continue learning JavaScript, you’ll notice that functions appear everywhere—from simple calculations to complex application logic.