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

As we dive deeper into our web development cohort, we quickly learn the golden rule of programming: DRY (Do not Repeat Yourself).

If you find yourself copying and pasting the exact same block of code multiple times, you are doing extra work. Instead, we use Functions.

Think of a function as a recipe. You write down the steps to bake a cake once. Then, whenever you want a cake, you just say "bake cake!" without having to rewrite the instructions. Functions are reusable blocks of code that perform a specific task.

Functions are essential for writing efficient, organized, and maintainable code. Most specific reason for using functions are: 1. Code Reusability 2. Modularity and Organization 3. Readability 4. Easier Maintenance and Debugging

Function declaration syntax: The Traditional Way

A Function Declaration is the standard way to create a function. You announce to JavaScript, "Here is a function, and here is its name." You start with the function keyword, followed by the name of the function, parentheses (), and curly braces {} holding the logic.

// Function Declaration
function addNumbers(a, b) {
  return a + b;
}

// Calling the function
console.log(addNumbers(5, 10)); // Outputs: 15

E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference>node 06-assign.js
15

Function expression syntax: The Variable Way

A Function Expression does the exact same job, but it writes the code a little differently. Instead of just declaring the function on its own, you store the function inside a variable. Because it is stored in a variable, the function itself often doesn't need a name (making it an anonymous function).

// Function Expression
const addNumbersExpression = function(a, b) {
  return a + b;
};

// Calling the function
console.log(addNumbersExpression(6, 11)); // Outputs: 17

E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference>node 06-assign.js
17

Notice the semicolon; at the end. Because it is a variable assignment, we end it like we would any normal const or let statement.

Key differences between declaration and expression

Function Declaration	Function Expression
A function declaration must have a function name.	A function expression is like a function declaration without the function name.
Function declaration does not require a variable assignment.	Function expressions can be stored in a variable assignment.
These are executed before any other code.	Function expressions load and execute only when the program interpreter reaches the line of code.
The function in function declaration can be accessed before and after the function definition.	The function in function expression can be accessed only after the function definition.
Function declarations are hoisted	Function expressions are not hoisted
Syntax: function addNumbers(num1, num2) {// codes}	Syntax: var addNumbersExpressio= function (num1, num) {// codes}

Basic idea of hoisting (very high level)

Hoisting means: JavaScript moves function declarations to the top of their scope before execution. If they both do the same thing, why do we have two different ways to write them? The main difference lies in a JavaScript behavior Hoisting.

Imagine JavaScript reads your code file in two quick passes.

1. In the first pass, it scans for Function Declarations and magically "hoists" (lifts) them to the very top of your file.

2. In the second pass, it runs your code line by line.

Because of hoisting, you can call a Function Declaration before you define it.

// This WORKS perfectly!
greet(); 
function greet() {
  console.log("Hello there!");
}

E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference>node 06-assign.js
Hello there!

However, Function Expressions are NOT hoisted in the same way. If you try to call a Function Expression before it is defined, JavaScript will throw a massive error.

// This will THROW AN ERROR!
sayGoodbye(); 
const sayGoodbye = function() {
  console.log("See you soon!");
};

E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference>node 06-assign.js
E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference\06-assign.js:25
sayGoodbye(); 
^

ReferenceError: Cannot access 'sayGoodbye' before initialization

When to use each type

Use Function Declaration When:

• You want reusable named functions

• You want to call it before definition

• Writing utility/helper functions

Use Function Expression When:

• You want more control over when function is defined

• You want to pass function as a value

• Working inside callbacks or event handlers

In modern JavaScript, function expressions are very common.

Assignment Idea

1. Write a function declaration that multiplies two numbers

2. Write the same logic using function expression

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


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

1. Call both functions and print results

console.log("Declaration result:", multiply(4, 5));

console.log("Expression result:", multiplyExp(4, 5));

E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference>node 06-assign.js
Declaration result: 20
Expression result: 20

1. Try calling them before defining and observe behavior

console.log(multiply(3, 3));
function multiply(a, b) {
  return a * b;
}
// *************************************
console.log(multiplyExp(3, 3));
let multiplyExp = function(a, b) {
  return a * b;
};

E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference>node 06-assign.js
9
E:\Hitesh_Web_Dev_2026\blog_folder\06.JS-Function Declaration vs Function Expression What’s the Difference\06-assign.js:68
console.log(multiplyExp(3, 3));
            ^

ReferenceError: Cannot access 'multiplyExp' before initialization

Conclusion

Understanding the difference between Function Declarations and Function Expressions is a major stepping stone in JavaScript. While Declarations offer the flexibility of hoisting (letting you organize your code however you like), Expressions teach us that functions are just values that can be stored in variables.

As a best practice in modern JavaScript, many developers prefer using Function Expressions because it forces you to write code in a predictable, top-to-bottom order.