JavaScript Functions – Reusable Blocks of Code

In the previous article, we learned about loops, which allow us to repeat code efficiently. However, as programs grow larger, repeating the same code in multiple places becomes difficult to manage.

To solve this problem, JavaScript provides Functions.

Functions allow us to group related statements into a reusable block of code that can be executed whenever needed.

In this article, we will learn:

• What functions are

• Why functions are needed

• Function declaration

• Function calling

• Parameters and arguments

• Return values

• Function expressions

• Arrow functions

• Variable scope

• Practical examples

• Real-world applications

---

What is a Function?

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

Think of a function as a machine.

Example:

Input
  ↓
Function
  ↓
Output

---

Why Functions are Needed

Without functions:

document.write("Welcome");
document.write("<br>");

document.write("Welcome");
document.write("<br>");

document.write("Welcome");
document.write("<br>");

Code becomes repetitive.

Using a function:

function showMessage()
{
    document.write("Welcome");
    document.write("<br>");
}

showMessage();
showMessage();
showMessage();

The same code can be reused easily.

---

Advantages of Functions

• Reusability

• Better organization

• Easier debugging

• Reduced code duplication

• Improved readability

---

Function Declaration

A function is declared using the function keyword.

---

Syntax

function functionName()
{
    statements;
}

---

Example

function greet()
{
    document.write("Hello World");
}

---

Function Calling

Declaring a function does not execute it.

To execute it, we must call it.

Example:

function greet()
{
    document.write("Hello World");
}

greet();

Output:

Hello World

---

Dry Run

Function Created
      ↓
greet() Called
      ↓
Function Executes
      ↓
Hello World Displayed

---

Multiple Function Calls

function greet()
{
    document.write("Hello<br>");
}

greet();
greet();
greet();

Output:

Hello
Hello
Hello

---

Function with Parameters

Parameters allow functions to receive data.

---

Syntax

function functionName(parameter)
{
}

---

Example

function greet(name)
{
    document.write("Hello " + name);
}

greet("Rahul");

Output:

Hello Rahul

---

Understanding Parameters

function greet(name)

Here:

name

is a parameter.

---

Understanding Arguments

greet("Rahul");

Here:

Rahul

is an argument.

---

Dry Run

Argument = Rahul

Passed to parameter name

Output:

Hello Rahul

---

Function with Multiple Parameters

Example:

function add(a, b)
{
    document.write(a + b);
}

add(10, 20);

Output:

30

---

Dry Run

a = 10

b = 20

a + b

30

---

Example – Student Information

function student(name, age)
{
    document.write(
    name + " " + age
    );
}

student("Rahul",20);

Output:

Rahul 20

---

Return Statement

The return statement sends a value back from a function.

---

Syntax

function name()
{
    return value;
}

---

Example

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

let result =
add(10,20);

document.write(result);

Output:

30

---

Dry Run

add(10,20)

10+20

return 30

Stored in result

Display result

---

Function Without Return

function add(a,b)
{
    document.write(a+b);
}

Directly displays output.

---

Function With Return

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

Returns output for further use.

---

Example – Square of a Number

function square(num)
{
    return num*num;
}

let ans =
square(5);

document.write(ans);

Output:

25

---

Example – Even or Odd

function check(num)
{
    if(num%2==0)
    {
        return "Even";
    }
    else
    {
        return "Odd";
    }
}

document.write(
check(10)
);

Output:

Even

---

Function Expression

Functions can be stored inside variables.

Example:

let greet =
function()
{
    document.write(
    "Hello"
    );
};

greet();

Output:

Hello

---

Why Function Expressions?

Useful for:

• Dynamic programming

• Event handling

• Callbacks

---

Anonymous Functions

Functions without names.

Example:

function()
{
    document.write(
    "Hello"
    );
}

Usually used inside variables or events.

---

Arrow Functions

Introduced in modern JavaScript.

Shorter syntax.

---

Traditional Function

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

---

Arrow Function

let add =
(a,b)=>
{
    return a+b;
};

---

Short Arrow Function

let add =
(a,b)=>a+b;

---

Example

let square =
x => x*x;

document.write(
square(5)
);

Output:

25

---

Variable Scope

Scope determines where a variable can be accessed.

---

Global Scope

Variables declared outside functions.

Example:

let name = "Rahul";

function show()
{
    document.write(name);
}

Accessible everywhere.

---

Local Scope

Variables declared inside functions.

Example:

function show()
{
    let age = 20;

    document.write(age);
}

Only accessible inside function.

---

Example

function demo()
{
    let x = 10;
}

document.write(x);

Output:

Error

Because x is local.

---

Complete Program – Addition Function

<!DOCTYPE html>

<html>

<body>

<script>

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

let result =
add(10,20);

document.write(
"Sum = " + result
);

</script>

</body>

</html>

Output:

Sum = 30

---

Program – Factorial Using Function

function factorial(n)
{
    let fact = 1;

    for(let i=1;i<=n;i++)
    {
        fact*=i;
    }

    return fact;
}

document.write(
factorial(5)
);

Output:

120

---

Dry Run

1×2×3×4×5

120

---

Program – Largest of Two Numbers

function largest(a,b)
{
    if(a>b)
    {
        return a;
    }
    else
    {
        return b;
    }
}

document.write(
largest(10,20)
);

Output:

20

---

Types of Functions

Type	Description
Simple Function	No parameters
Parameterized Function	Uses parameters
Return Function	Returns value
Anonymous Function	No name
Arrow Function	Modern syntax

---

Real-Life Applications

Functions are used in:

• Login systems

• ATM software

• Shopping carts

• Banking applications

• Games

• Mobile apps

Every button click on platforms like Google, Amazon, and Facebook typically triggers one or more functions.

---

Common Mistakes Beginners Make

Forgetting Function Call

Wrong:

function greet()
{
    document.write("Hello");
}

Output:

Nothing

Because function was not called.

Correct:

greet();

---

Missing Return Statement

Wrong:

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

Correct:

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

---

Using Local Variables Outside Function

Wrong:

function demo()
{
    let x=10;
}

document.write(x);

Results in an error.

---

Advantages of Functions

• Reusable code

• Easier maintenance

• Better structure

• Improved readability

• Reduced duplication

---

Conclusion

Functions are one of the most important building blocks of JavaScript. They help organize programs into small, reusable units that are easy to understand and maintain.