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

When writing functions in JavaScript, there are two main ways to create them: function declarations and function expressions.

Though both are used to define functions, they work differently in some important ways.

In this article, we will explain these differences clearly.

Function Declaration

To create a function using a function declaration, you start with the word function, then give the function a name. After that, you write the code that the function will do inside { }.

Example:

function generateIntro(name) {
  return `Hi, my name is ${name}`;
}

const Rajak = generateIntro("Rajak");
console.log(Rajak);  // Output: Hi, my name is Rajak

Here, we made a function called generateIntro. It takes a name and gives a greeting message.

Function Expression

In a function expression, you create a function and save it inside a variable. This way, you can use the variable to run the function.

One common way is to use the function keyword without a name. This is called an anonymous function. Example:

const generateIntro = function(name) {
  return `Hi, my name is ${name}`;
}

const Rajak = generateIntro("Rajak");
console.log(Rajak);  // Output: Hi, my name is Rajak

Here, the function has no name, but it is saved in the variable generateIntro. Later, we call the function by using this variable.

Important: You must assign the function to a variable. If you just write:

function(name) {
  return `Hi, my name is ${name}`;
}

JavaScript will give an error because anonymous functions cannot stand alone. They need a variable to be stored in.

Arrow Function Expressions

You can also create functions using arrow functions, which were added in ES6. Arrow functions let you write functions in a shorter way.

Example:

const generateIntro = (name) => {
  return `Hi, my name is ${name}`;
}

const Rajak = generateIntro("Dillion");
console.log(Rajak);  // Output: Hi, my name is Dillion

Here, (name) => { ... } is an arrow function. Like before, we store this function in the variable generateIntro.

Note: Arrow functions are always function expressions. You cannot use arrow functions as function declarations.

In this article, we will mostly talk about function expressions using the function keyword, but the same ideas also apply to arrow functions.

Function Declarations vs Function Expressions

What’s the difference between these two ways of creating functions? Why does it matter?

The difference is important because they behave differently, and this can affect how your code runs.

1. Expressed functions cannot be used before initialization

You can call a function declared like this before it appears in your code:

const result = sum(20, 50);
console.log(result);  // Output: 70

console.log("hello");

function sum(num1, num2) {
  return num1 + num2;
}

Here, we used sum() before the function was written. This works because of hoisting — JavaScript moves all function declarations to the top before running the code.

---

2. Function Expressions cannot be used before they are created

If you try to do the same with a function expression, you get an error:

const result = sum(20, 50);
console.log(result);

const sum = function(num1, num2) {
  return num1 + num2;
};

This causes a ReferenceError because sum is not initialized when we try to call it.

---

3. What if you use var instead of const?

const result = sum(20, 50);
console.log(result);

var sum = function(num1, num2) {
  return num1 + num2;
};

This gives a TypeError: sum is not a function. That’s because var variables are hoisted but set to undefined first, so when you call sum() it is like calling undefined().

2. Function Expressions Must Be Assigned to a Variable to Use Them Later

When you declare a function, it already has a name, so you can call it anytime by that name. But function expressions don’t have a name by themselves. To use them later, you must assign the function to a variable.

Example:

const printName = function(firstname, lastname) {
  console.log(`${firstname} ${lastname}`);
};

Here, the function is saved inside the variable printName. Now, you can run the function by calling printName().

3. Anonymous Functions Are Useful for One-Time Tasks

Sometimes, you want to run a function just once and don’t need to use it later. In these cases, you don’t need to give the function a name. This is when function expressions are useful.

---

Immediately Invoked Function Expressions (IIFEs)

An IIFE is a function that runs right after it is created.

Example with a regular function:

(function() {
  console.log('deeecode');
})();

Output:

deeecode

Here, the function is made and then immediately called by the () at the end.

You can also write an IIFE with an arrow function:

(() => {
  console.log('deeecode');
})();

---

Why not use function declarations here?

If you try a function declaration inside an IIFE like this:

(function print() {
  console.log('deeecode');
})();

print();  // Error: print is not defined

The function runs once, but you cannot call print() later because its name is hidden inside the parentheses.

Callback Functions

A callback function is a function passed as an argument to another function. Often, we use anonymous functions (function expressions) as callbacks.

For example, the forEach method on arrays takes a callback function to run on each item:

const array = [1, 2, 3];

array.forEach(function(value) {
  console.log(value);
});

Here, we passed an anonymous function to forEach. It runs for each item in the array.

---

You can also use a named function as a callback, but like before, you cannot call that function by name later:

const array = [1, 2, 3];

array.forEach(function print(value) {
  console.log(value);
});

// Error if you try:
// print();  // ReferenceError: print is not defined

---

Wrap Up

You will hear the terms function declaration and function expression a lot when learning JavaScript functions.

Both can do similar jobs, but they behave differently in important ways.

In this article, we saw how function expressions are different from function declarations, especially in hoisting and usage.

If you found this article helpful, please share it!