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

Imagine you are running a coffee shop. Every time a customer orders a latte, you have to grind the beans, steam the milk, and pour the espresso. If you had to write down these exact instructions for every single cup of coffee you make all day, you would waste a lot of time.

Instead, you create a standard recipe called "Make Latte." Now, whenever someone orders, you just say, "Execute the Make Latte recipe!"

In programming, writing the same code over and over again is a bad habit. To solve this, we use Functions. Functions are reusable blocks of code designed to perform a particular task. You write the code once, and you can use it as many times as you want.

In this blog, we will explore the two most common ways to create functions in JavaScript: Function Declarations and Function Expressions. We will understand how they look, how they behave differently, and when you should use each one.

1. Function Declarations (The Traditional Way)

A Function Declaration is the most standard way to create a function. It is like proudly announcing to JavaScript, "Here is a function, and this is its name!"

You start with the function keyword, give it a specific name, add parentheses () for any inputs (called arguments), and write your code inside curly braces {}.

Example: Adding two numbers

// We declare the function and name it 'addNumbers'
function addNumbers(a, b) {
  return a + b;
}

// We call (execute) the function
let sum = addNumbers(5, 10);
console.log(sum); // Output: 15

2. Function Expressions (The Variable Way)

A Function Expression is a slightly different approach. Instead of declaring a standalone function, you create a function and immediately store it inside a variable.

Because the function is stored in a variable, it often doesn't need its own name (this is called an anonymous function).

Example: Adding two numbers (as an expression)

// We create a variable and assign a function to it
let addNumbers = function(a, b) {
  return a + b;
};

// We call it using the variable name
let sum = addNumbers(5, 10);
console.log(sum); // Output: 15

At first glance, these two methods do the exact same thing. But under the hood, JavaScript treats them very differently.

The Big Difference: Hoisting

To understand the real difference between a declaration and an expression, we need to talk about a JavaScript concept called Hoisting.

When JavaScript runs your code, it doesn't just read it blindly from top to bottom. It does a quick "prep run" first. During this prep run, JavaScript looks for all Function Declarations and secretly moves them to the very top of your file.

Because of this, you can actually call a Function Declaration before you write it!

Hoisting with Function Declarations (This Works!):

// We call it BEFORE we define it
greetCustomer("Suprabhat"); // Output: Hello, Suprabhat!

function greetCustomer(name) {
  console.log("Hello, " + name + "!");
}

However, JavaScript does not hoist variables in the same way. If you try to call a Function Expression before you define it, your code will crash.

Hoisting with Function Expressions (This Fails!):

// We call it BEFORE we define it
greetCustomer("Suprabhat"); // Error! Cannot access 'greetCustomer' before initialization

let greetCustomer = function(name) {
  console.log("Hello, " + name + "!");
};

Summary: Key Differences

To keep things clear, here is a quick comparison of the two:

Feature	Function Declaration	Function Expression
Syntax	function myFunc() {}	let myFunc = function() {}
Name	Must have a name.	Usually anonymous (no name).
Hoisting	Yes. Can be called before it is defined in the code.	No. Must be defined before it is called.

When to Use Which?

As a beginner, you might be wondering which one you should use in your projects.

• Use Function Declarations when: You want a general, reusable utility function (like math calculations or text formatting) that you might need to use anywhere in your file. Because of hoisting, you can hide all your function definitions at the bottom of your file and keep your main logic clean at the top.

• Use Function Expressions when: You want to keep your code strictly predictable. Since they are not hoisted, they force you to define your functions before you use them, which many developers consider a cleaner, safer coding practice. They are also heavily used when passing functions as arguments to other functions (like in map, filter, or forEach).

Conclusion

Both Function Declarations and Function Expressions are powerful tools for creating reusable blocks of code. While they look similar, understanding how hoisting affects them is a huge step in mastering JavaScript. Declarations give you the flexibility to call functions from anywhere, while expressions give you strict, top-to-bottom predictability.