When learning JavaScript, one of the first things you encounter is functions. Functions are everywhere in programming, and once you understand them well, writing code becomes much easier and cleaner.

But JavaScript gives us multiple ways to create functions. Two very common ones are:

• Function Declaration

• Function Expression

They might look similar at first, but there are some important differences between them.

Let’s break it down step by step.

---

What Are Functions and Why Do We Need Them?

In simple words, a function is a reusable block of code designed to perform a specific task.

Instead of writing the same code again and again, we can wrap it inside a function and reuse it whenever needed.

Think of it like a machine:

Input → Function → Output

For example, imagine you want to add two numbers multiple times in your program. Instead of repeating the addition code everywhere, you can create a function.

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

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

Here:

• add is the function name

• a and b are parameters

• return sends the result back

Functions make code:

• easier to reuse

• easier to read

• easier to maintain

---

Function Declaration

A function declaration is the most traditional way of creating a function in JavaScript.

Syntax

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

Example

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

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

In this example:

• multiply is the function name

• a and b are parameters

• the function returns the multiplication result

Function declarations are straightforward and commonly used when defining 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)); // 20

Here:

• The function does not have to be named

• It is assigned to the variable multiply

• We call it using the variable name

Function expressions are very common when working with callbacks, event handlers, and modern JavaScript patterns.

---

Key Differences Between Function Declaration and Function Expression

Feature	Function Declaration	Function Expression
Definition style	Declared using function keyword	Function stored in a variable
Naming	Must have a name	Can be anonymous
Hoisting	Fully hoisted	Not fully hoisted
Usage	Used for general reusable functions	Often used in callbacks or dynamic code

Example comparison:

Function Declaration

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

Function Expression

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

Both work the same when called, but behave differently in terms of hoisting.

---

Understanding Hoisting (Simple Explanation)

Hoisting is a JavaScript behavior where some declarations are moved to the top of their scope before execution.

This affects function declarations and expressions differently.

---

Function Declaration Hoisting

You can call the function before it appears in the code.

sayHello();

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

This works because JavaScript hoists the function declaration.

---

Function Expression Hoisting

Calling a function expression before it is defined will cause an error.

sayHello();

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

This produces an error because:

• The variable exists

• But the function is not assigned yet

So JavaScript cannot execute it.

---

When Should You Use Each Type?

Both are useful depending on the situation.

Use Function Declarations When:

• Defining general reusable functions

• Writing simple programs

• You want hoisting behavior

Example:

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

---

Use Function Expressions When:

• Assigning functions to variables

• Working with callbacks

• Writing modern JavaScript patterns

Example:

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

In many modern JavaScript projects, function expressions and arrow functions are commonly used.

---

Assignment Practice

Try this small exercise.

1. Function Declaration

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

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

---

2. Function Expression

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

console.log(multiplyExp(3, 4));

---

3. Experiment With Hoisting

Try calling both functions before defining them and observe what happens.

You will notice:

• Function declarations still work

• Function expressions throw an error

This small experiment helps understand hoisting behavior in JavaScript.

---

Final Thoughts

Functions are one of the most important building blocks in JavaScript. Understanding the difference between function declarations and function expressions helps you write cleaner and more predictable code.

To summarize:

• Functions help reuse code

• Function declarations are hoisted

• Function expressions are not fully hoisted

• Both are useful depending on the situation

As you continue learning JavaScript, you'll also come across arrow functions, which are another modern way to write functions.

But mastering these basics is the first step.