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

Understanding Functions in JavaScript

Functions are one of the most important concepts in JavaScript. A function can be thought of as a block of code that performs a specific task or calculates a value.

Usually, a function takes input values (parameters), processes them, and then returns an output. The output should have a clear relationship with the input.

Before using a function, it must first be defined in the scope where you want to call it. Once defined, it can be used multiple times without rewriting the same code.

---

Why Are Functions Useful?

Functions provide several advantages when writing programs.

Reusability
You can write the logic once and use it many times in different parts of your program.

Modularity
Functions allow us to divide large problems into smaller and manageable pieces.

Maintainability
If a change is needed, updating the function automatically updates every place where it is used.

Better readability
Functions give clear names to tasks, making code easier to understand.

---

Function Declaration

A function declaration is the most common way to create a function in JavaScript.

It includes:

• The function keyword

• The name of the function

• A list of parameters inside parentheses

• The function body written inside curly braces {}

Example:

function multiply(num1, num2) {
  return num1 * num2;
}

Explanation:

• function → tells JavaScript we are defining a function

• multiply → the function name

• (num1, num2) → parameters (inputs)

• { return num1 * num2; } → function body

General syntax:

function functionName(parameter1, parameter2, ...parameterN) {
  // function body
}

---

Function Expression

JavaScript also allows us to create functions as part of an expression.

This type of function is called a Function Expression.

Example:

const calculateArea = function (length, width) {
  return length * width;
};

console.log(calculateArea(5, 6));
// Output: 30

In this example:

• A function is created and assigned to the variable calculateArea.

• The function does not have a name after the function keyword.

• Such functions are often called anonymous functions.

In simple words, this code means:

Create a function and store it inside the variable calculateArea.

---

Difference Between Function Declaration and Function Expression

Both approaches look similar but behave slightly differently.

One major difference is the function name.

In Function Declarations, the function must have a name.

In Function Expressions, the function name can be omitted, creating an anonymous function.

Function expressions can also be used to create an Immediately Invoked Function Expression (IIFE), which runs right after it is defined.

---

Function Declaration Hoisting

JavaScript has a behavior called hoisting.

Hoisting means that JavaScript moves certain declarations (such as functions and variables) to the top of their scope before executing the code.

Function declarations are fully hoisted. This means we can call the function even before it appears in the code.

Example:

greetUser();

function greetUser() {
  console.log("Welcome!");
}

Output:

Welcome!

Even though the function is written later in the code, JavaScript allows it to run earlier because it is hoisted.

---

Function Expression Hoisting

Function expressions behave differently.

They are not hoisted like function declarations.

Example:

console.log(showMessage);

showMessage();

var showMessage = function () {
  console.log("Hello there!");
};

Here is what happens:

• The variable showMessage is hoisted.

• But the function definition is not assigned yet.

So when we try to call it early, JavaScript throws an error because the variable does not yet contain a function.

---

When Should We Use Function Declaration or Function Expression?

A good practice is to prefer Function Declarations when possible.

Reasons include:

• They are easier to read

• They can be called before they appear in the code

• They help organize large programs better

However, Function Expressions are useful when:

• Functions need to be assigned to variables

• Functions are passed as arguments

• Conditional or dynamic functions are required

---

Conclusion

Functions are powerful features in JavaScript.

They can be treated as values, which means they can be stored in variables, passed around, or copied.

Key points to remember:

• A function defined as a separate statement is called a Function Declaration.

• A function created inside an expression is called a Function Expression.

• Function Declarations are hoisted, so they can be used before their definition.

• Function Expressions are created only when the program execution reaches them.

In most situations, Function Declarations are preferred because they improve readability and give more flexibility when organizing code. Function Expressions are mainly used when a declaration does not fit the situation.