Function Declaration vs Function Expression in JavaScript

Functions are one of the most important parts of JavaScript. A function is simply a reusable block of code that performs a specific task. Instead of writing the same code again and again, we can place it inside a function and call it whenever we need.

For example, if we want to add two numbers multiple times, a function makes the code cleaner and easier to manage.

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

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

JavaScript mainly allows us to create functions in two common ways:

• Function Declaration

• Function Expression

Let’s understand both.

---

1. Function Declaration

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

Syntax

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

Example

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

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

Here:

• greet is the function name

• name is the parameter

• The function returns a greeting message

Function declarations are simple and commonly used when defining functions that will be reused many times.

---

2. Function Expression

A function expression stores a function inside a variable. The function itself does not need a name because the variable acts as the reference.

Syntax

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

Example

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

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

In this case:

• The function is stored in the variable greet

• We call the function using the variable name

Function expressions are useful when we want to pass functions as values or keep functions inside variables.

---

Key Differences

Feature	Function Declaration	Function Expression
Syntax	Defined using function name()	Function stored in a variable
Name	Must have a name	Can be anonymous
Hoisting	Fully hoisted	Not fully hoisted
Usage	Common for reusable functions	Useful when functions act like values

---

Understanding Hoisting (Simple Explanation)

Hoisting means JavaScript moves certain declarations to the top of the code before execution.

Function Declaration Example

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

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

This works because function declarations are hoisted. JavaScript already knows about the function before the code runs.

Function Expression Example

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

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

This will cause an error because the variable add is not initialized yet.

---

When Should You Use Each?

Use Function Declaration when:

• The function is reusable

• You want cleaner structure

• The function should be accessible anywhere in the scope

Use Function Expression when:

• Assigning functions to variables

• Passing functions as arguments

• Working with callbacks or dynamic logic

Both approaches are widely used in JavaScript, and understanding them helps you write cleaner and more flexible code.

---

Assignment

1. Write a function declaration that multiplies two numbers.

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

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

1. Write the same logic using a function expression.

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

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