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

When writing JavaScript programs, we often need to reuse code multiple times. Instead of writing the same code again and again, we can use functions.

Functions help us organize code and make programs easier to maintain.

In this article, we will understand:

• What functions are

• Function declaration

• Function expression

• Key differences between them

• A simple idea of hoisting

What Are Functions and Why Do We Need Them?

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

Example: Adding two numbers.

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

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

Output

8

Instead of writing the same logic many times, we can simply call the function whenever needed.

Function Declaration

A function declaration defines a function using the function keyword followed by a name.

Syntax

function functionName(parameters) {
  // code
}

Example

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

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

Output

Hello Ram

Here:

• greet is the function name

• "Ram" is the argument passed to the function

Function Expression

A function expression stores a function inside a variable.

Syntax

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

Example

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

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

Output

Hello Ram

The function works the same way, but it is assigned to a variable.

Function Declaration vs Function Expression

Feature	Function Declaration	Function Expression
Syntax	Uses function name()	Function stored in variable
Hoisting	Works before definition	Cannot call before definition
Naming	Must have a name	Can be anonymous
Usage	Common for general functions	Often used with callbacks

Example comparison:

Function Declaration

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

Function Expression

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

Both perform the same task.

Basic Idea of Hoisting

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

Example with Function Declaration

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

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

Output

5

Even though the function is defined after the call, it still works.

Example with Function Expression

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

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

This will produce an error.

Why?

Because the variable add is not initialized when the function is called.

When to Use Each Type

Use Function Declaration When

• Creating general reusable functions

• The function needs to be accessible anywhere in the file

Use Function Expression When

• Assigning functions to variables

• Using functions inside callbacks

• Writing modular or functional-style code

Both are useful depending on the situation.

Example

Function Declaration

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

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

Output

20

Function Expression

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

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

Output

20

Calling Before Definition

Function Declaration:

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

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

Works correctly.

Function Expression:

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

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

This will give an error.

Conclusion

Functions are essential in JavaScript because they help us write reusable and organized code.

Key points to remember:

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

• A function expression stores a function inside a variable

• Function declarations support hoisting

• Function expressions do not work before definition

Understanding this difference helps developers write cleaner and more predictable JavaScript code.