While writing programs, we often repeat the same set of instructions multiple times. Writing the same code again and again makes programs longer, harder to maintain, and more prone to errors.

JavaScript provides a powerful feature called functions that helps solve this problem.

Functions allow us to group a set of instructions together and reuse them whenever needed.

What Are Functions?

A function is a reusable block of code designed to perform a specific task.

Instead of repeating the same logic multiple times, we can write it once inside a function and call it whenever we need it.

For example, imagine you want to add two numbers in different parts of a program. Instead of writing the addition logic many times, you can create a function.

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

console.log(addNumbers(5, 3));
console.log(addNumbers(10, 20));

Here:

• addNumbers is the function name

• a and b are parameters

• return sends the result back

Output:

8
30

The same function can be reused with different values.

Why Do We Need Functions?

Functions make programs easier to write and manage.

Some important benefits of functions include:

1. Code Reusability

Write code once and reuse it multiple times.

2. Better Organization

Functions break a large program into smaller logical pieces.

3. Easier Debugging

If a problem occurs, we only need to check the function instead of the entire program.

Example Without Function

let sum1 = 5 + 3;
let sum2 = 10 + 20;
let sum3 = 7 + 9;

Example With Function

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

add(5, 3);
add(10, 20);
add(7, 9);

Using functions keeps the code cleaner and easier to maintain.

Function Declaration

One common way to create a function is using a function declaration.

Syntax

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

Example

function greet(name) {
  console.log("Hello " + name);
}

greet("Sameer");

Output:

Hello Sameer

Explanation:

• function keyword starts the declaration

• greet is the function name

• name is the parameter

• The code inside { } runs when the function is called

Function Expression

Another way to create functions in JavaScript is using a function expression.

Instead of defining a function directly, we store a function inside a variable.

Syntax

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

Example

const greet = function(name) {
  console.log("Hello " + name);
};

greet("Sameer");

Output:

Hello Sameer

In this case:

• The function does not have its own name

• It is stored inside the variable greet

So the variable behaves like a function.

Function Declaration vs Function Expression

Both approaches create functions, but they behave slightly differently.

Comparison Diagram

Feature	Function Declaration	Function Expression
Definition	Declared using function keyword	Function stored in a variable
Naming	Always has a name	Often anonymous
Hoisting	Fully hoisted	Not fully hoisted
Usage	Can be called before definition	Must be defined before calling

Understanding Hoisting (High-Level Idea)

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

This mainly affects function declarations.

Function Declaration and Hoisting

Function declarations can be called before they appear in the code.

Example:

sayHello();

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

Output:

Hello!

Even though the function is written later, JavaScript already knows about it.

Visual Representation of Hoisting

Function Expression and Hoisting

Function expressions behave differently.

Example:

sayHello();

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

This will produce an error because the variable hasn't been assigned the function yet.

Execution flow:

Variable Declared
Value Not Assigned Yet
Function Called → Error

So function expressions cannot be called before they are defined.

When Should You Use Each Type?

Both function declaration and function expression are useful in different situations.

Use Function Declaration When

• You want a function available throughout the file

• The function represents a main operation

• Readability is important

Example:

calculateTotal()
validateForm()
sendEmail()

Use Function Expression When

• You want the function to behave like a variable

• The function is used only in a specific place

• You want more control over when the function becomes available

Example:

event handlers
callbacks
temporary helper functions