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

Introduction:

Imagine you are cooking in a kitchen.

If you need to chop vegetables multiple times, you wouldn’t explain the steps again and again. Instead, you create a recipe that you can reuse anytime.

In programming, functions work like reusable recipes.

Instead of repeating the same code many times, we place it inside a function and call it whenever needed.

In this blog, we’re going to break down:

• The "Why": Why we use functions to keep our code DRY (Don't Repeat Yourself).

• The "How": The structural differences between Function Declarations and Function Expressions.

• The "When": A high-level look at Hoisting and how to choose the right tool for the job.

What are Functions & Why We Need Them?

A function is a reusable block of code designed to perform a particular task. You define it once and "invoke" (call) it as many times as you need.

• Dry Principle: "Don't Repeat Yourself." Instead of writing 10 lines of math everywhere, you put them in one function.

• Organization: They break complex problems into smaller, manageable chunks.

Simple Example: Add Two Numbers

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

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

Here:

add → function name
a, b → parameters
return → sends result back

Idea of Function Reuse

Program
   |
   |----> add(2,3) ----> 5
   |
   |----> add(5,7) ----> 12
   |
   |----> add(10,20) ---> 30

One function can be used many times.

Function Declaration

A Function Declaration defines a named function using the function keyword.

Syntax

function functionName(parameters) {
   // code
}

Example

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

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

Output

Hello Prince

Key Idea

The function is declared first, then called later.

Function Expression

A Function Expression stores a function inside a variable.

Syntax

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

Example

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

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

Even though it looks similar, this function is assigned to a variable.

Output

Hello Prince

Key Idea

The function is defined (stored in a variable) first, then executed when called.

Declaration vs Expression

Function Declaration

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

Function Expression

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

Both do the same job, but they behave differently in JavaScript.

Key Differences

Feature	Function Declaration	Function Expression
Syntax	function name() {}	const name = function() {}
Definition style	Uses function name()	Function stored in variable
Hoisting	Yes, Fully hoisted (can call before definition)	Not fully hoisted (must define before calling)
Call before definition	Works	Error
Usage	General purpose, global logic	Closures, callbacks, or local scope
Flexibility	Rigid structure	More flexible (can be arrow functions)

Hoisting

Hoisting is JavaScript’s default behavior where declarations are moved to the top of their scope during compilation.

• Declarations are hoisted: You can call the function before you write it in your code.

• Expressions are NOT hoisted: Since they are stored in variables (like const), you cannot use them until the code execution actually reaches that line.

Function Declaration Hoisting

This works:

sayHello();

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

Why?

Because JavaScript knows about the function before executing the program.

Function Expression Hoisting

This does NOT works:

sayHello();

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

Why?

This produces an error because the variable is not initialized yet.

Flow of Hoisting

When to Use Each?

• Use Declarations when you want a function to be available throughout your entire script and you prefer the traditional, readable structure.

• Use Expressions when you want to limit the function's scope, pass it as an argument to another function (callbacks), or keep your global namespace clean.

In closing

I hope that you’ve found this blog on “Function Declaration vs Function Expression: What’s the Difference?” helpful...!

That's all for today! 😁 You reached the end of the article 😍.

Want more..?

I write articles on princekumar-engineer.hashnode.dev, and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

• GitHub