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

Introduction

In JavaScript, functions are one of the most important building blocks. A function is simply a reusable block of code designed to perform a specific task. Instead of writing the same logic again and again, we can place that logic inside a function and call it whenever needed.

Think of a function like a small machine: you give it some inputs, it processes them, and it gives you an output.

For example, if we want to add two numbers multiple times in our program, we can create a function:

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

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

Here, the function takes two numbers and returns their sum. Simple, reusable, and clean.

In JavaScript, functions can be created in different ways. The two most common methods are:

• Function Declaration

• Function Expression

Although both achieve similar results, they behave differently in certain situations.

Function Declaration

A function declaration defines a function using the function keyword followed by a name.

Syntax

function functionName(parameters) {
  // code
}

Example

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

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

Here:

• greet is the function name

• name is the parameter

• The function returns a greeting message

Function declarations are straightforward and commonly used when defining functions at the top level of a program.

Function Expression

A function expression creates a function and assigns it to a variable.

Syntax

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

Example

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

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

Here, the function itself does not necessarily need a name. It is stored inside the variable greet, and we call it using that variable.

This approach treats functions like values, which can be stored, passed, or returned just like numbers or strings.

Function Declaration vs Function Expression

Here is a quick comparison between the two:

Feature	Function Declaration	Function Expression
Definition style	Declared using function name()	Function assigned to a variable
Hoisting	Fully hoisted	Not fully hoisted
Calling before definition	Works	Causes an error
Common usage	General reusable functions	Callbacks, dynamic logic

Understanding Hoisting (Simple Explanation)

JavaScript processes code in a way where some declarations are moved to the top of their scope before execution. This behavior is called hoisting.

Function Declaration Hoisting

Function declarations are fully hoisted, which means they can be called before they appear in the code.

sayHello();

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

Even though the function is written after the call, it still works.

Function Expression Hoisting

Function expressions behave differently because the variable is hoisted, but the function assignment is not.

sayHello(); // Error

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

Here, JavaScript knows the variable sayHello exists, but the function hasn’t been assigned yet when the call happens. So it throws an error.

When Should You Use Each?

Both types are useful, and choosing between them depends on the situation.

Function Declarations

Good for:

• Defining main logic of a program

• Utility/helper functions

• Functions you want available everywhere in the scope

Example:

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

Function Expressions

Useful for:

• Callback functions

• Passing functions as arguments

• More controlled execution

Example:

setTimeout(function () {
  console.log("Executed after 2 seconds");
}, 2000);

Assignment Practice

Try implementing both approaches yourself.

1. Function Declaration

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

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

2. Function Expression

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

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

3. Experiment with Hoisting

Try calling both functions before their definitions and observe the behavior.

You will notice:

• Function declaration works

• Function expression throws an error

This small experiment helps understand how JavaScript handles functions internally.

Final Thoughts

Both function declarations and function expressions allow us to create reusable logic in JavaScript. The main difference lies in how JavaScript processes them during execution, especially because of hoisting.

Function declarations are often used for general program structure, while function expressions are common when functions need to be treated as values, such as callbacks or dynamic logic.

Understanding the difference may seem small at first, but it becomes very useful when working with larger JavaScript applications.