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

INTRODUCTION

If JavaScript were a kitchen, functions would be the recipes. Instead of repeating the same cooking steps again and again, we write the recipe once and reuse it whenever we want.

In programming, functions help us organize code, avoid repetition, and make programs easier to understand.

But in JavaScript, there are two common ways to create functions:

1. Function Declarations

2. Function Expressions

They look similar but behave differently in some important ways. Let’s break it down step by step.

---

Why Do We Need Functions?

Imagine writing the same logic again and again.

console.log("Hello Anil");
console.log("Hello John");
console.log("Hello Priya");

Instead, we can create a function:

function greet(name) {
  console.log("Hello " + name);
}

greet("Anil");
greet("John");
greet("Priya");

Now we have reusable code.

Functions help with:

• Reusability

• Cleaner code

• Better organization

• Easier debugging

Think of a function like a coffee machine ☕

You press a button → it performs steps → you get coffee.

---

Function Declaration

A Function Declaration defines a function using the function keyword followed by a name.

Syntax

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

Example

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

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

Output:

8

Here:

• add is the function name

• a and b are parameters

• return gives the result

Why This Is Simple

Function declarations are easy to read and are commonly used for defining main functions in a program.

---

Function Expression

A Function Expression is when a function is stored inside a variable.

Syntax

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

Example

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

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

Output:

20

Here:

• multiply is a variable

• The function is assigned to it

Think of it like putting a tool inside a box and labeling the box.

The tool is the function.

The label on the box is the variable name.

---

Key Differences Between Function Declaration and Expression

Let’s compare them.

Feature	Function Declaration	Function Expression
Syntax	Defined with function name()	Function assigned to variable
Name	Must have a function name	Often anonymous
Hoisting	Fully hoisted	Not hoisted the same way
Usage	Good for defining main functions	Good for callbacks or dynamic logic

Example comparison:

Function Declaration

function greet() {
  console.log("Hello!");
}

Function Expression

const greet = function() {
  console.log("Hello!");
};

They look similar but behave differently behind the scenes.

---

Understanding Hoisting (Simple Explanation)

Now we reach the interesting JavaScript magic trick: hoisting.

JavaScript moves function declarations to the top of the scope during execution.

Example

sayHello();

function sayHello() {
  console.log("Hello from JavaScript!");
}

This works perfectly.

Even though we call the function before defining it, JavaScript still runs it.

Why?

Because function declarations are hoisted.

---

But Function Expressions Are Different

This code will throw an error:

sayHi();

const sayHi = function() {
  console.log("Hi!");
};

Error:

Cannot access 'sayHi' before initialization

Why?

Because only the variable is hoisted, not the function inside it.

So JavaScript knows sayHi exists but doesn't know the function yet.

Think of it like:

Function Declaration → Fully prepared meal

Function Expression → Ingredients are there, but cooking hasn't started yet.

---

When Should You Use Each?

Use Function Declaration When

• Creating main functions

• Writing reusable utilities

• You want the function available anywhere in the scope

Example:

function calculateTotal(price, tax) {
  return price + tax;
}

---

Use Function Expression When

• Assigning functions to variables

• Passing functions as arguments

• Using callbacks

Example:

const numbers = [1, 2, 3];

numbers.map(function(num) {
  return num * 2;
});

This pattern is very common in modern JavaScript.

---

Quick Summary

Concept	Explanation
Function	Reusable block of code
Function Declaration	Defined with function name()
Function Expression	Function stored in a variable
Hoisting	Function declarations are moved to the top
Expression Hoisting	Only variable is hoisted, not the function

---

Final Thoughts

Functions are the building blocks of JavaScript programs.

Understanding the difference between Function Declarations and Function Expressions helps you:

• write cleaner code

• avoid hoisting bugs

• understand modern JavaScript patterns

Most developers eventually use Function Expressions and Arrow Functions more often, especially in frameworks like React and Node.js.

But mastering the fundamentals will make your JavaScript foundation much stronger.

And remember:

Good programmers don't copy code.

They write functions so they never have to copy it again.

---

If you found this helpful, keep exploring JavaScript fundamentals — because every advanced concept in JavaScript is built on these basics.