DEV Community

Cover image for Functions in Javascript
Janu Nirmal
Janu Nirmal

Posted on

Functions in Javascript

Functions are sets of instructions. These are reusable building blocks which are used to execute a specific task whenever we need it.

Uses of function:

Syntax and explanation:

1) Function keyword — function

What it means:
This word tells the computer:
👉 "I am going to create a function."

2) Function name — sum

What it means:
This is the name of the function.
You use this name later to run the function.

3) Parameters — (x, y)

What it means:
These are inputs the function expects to receive.

Simple example:
Like a calculator asking:
👉 "Give me two numbers."

Here:
x = first number
y = second number

4) Function body — { }

What it means:
This is the working area of the function.
All instructions are written inside these curly brackets.

Simple example:
Like a kitchen where cooking happens.

5) Return keyword — return

What it means:
This sends the result back after the work is done.

Simple example:
Like giving the answer after solving a problem.

👉 "Here is your result."

6) Statement — return x + y;
What it means:
This is the actual task the function performs.

Here it means:
👉 Add x and y

Simple example:
If:

x = 4
y = 5

Result:

9

7) Arguments — (4, 5)
What it means:
These are the real values sent to the function.

Simple example:
Parameters are placeholders:

(x, y)

Arguments are actual numbers:

(4, 5)

8) Function call — sum(4, 5)

What it means:
This tells the function to run.

Simple example:
Like calling someone on the phone:
👉 "Sum, please do this calculation."

9) Variable — let result

What it means:
This stores the answer returned by the function.

Simple example:
Like saving the result in a box.

result = 9

Simple Real-Life Example

function like a juice machine:

Programming Term Real-Life Meaning
Function Juice machine
Parameters Fruits
Function body: Machine process
Return Juice output
Arguments Actual fruits given
Function call Pressing the button

Types of function:

1) Function Declaration

Simple Explanation
A function declaration is the normal way to create a function.

Real-Life Comparison
Like writing a recipe in advance and using it whenever needed.

Key Points
Has a name
Reusable
Can be called before it is written in code

When to Use
Use when you need a standard reusable function.

2) Function Expression

Simple Explanation
A function expression means storing a function inside a variable.

Real-Life example
Like saving a phone number in contacts.

Key Points
Stored in a variable
Must be defined before using
Very common in modern JavaScript

When to Use
Use when you want to store or pass a function.

3) Arrow Function

Simple Explanation
An arrow function is a short and modern way to write a function.

Real-Life example
Like using a shortcut instead of a long route.

Key Points
Uses => symbol
Short syntax
Easy to read

When to Use
Use for small, simple functions.

4) Anonymous Function (Yet to be discussed)

Simple Explanation
An anonymous function is a function without a name.

Real-Life example
Like a temporary worker hired for one task.

Key Points
No name
Used one time
Often used inside another function

When to Use
Use when the function is needed only once.

5) Async Function (Yet to be discussed)

Simple Explanation
An async function is used when the task takes time to finish.

Real-Life example
Like ordering food and waiting for delivery.

Key Points
Uses async
Uses await
Handles slow operations
When to Use

Use for:
API calls
File reading
Database operations

6) Constructor Function (Yet to be discussed)

Simple Explanation
A constructor function is used to create multiple objects.

Real-Life example
Like a cookie cutter that makes many cookies of the same shape.

Key Points
Uses new keyword
Creates objects
Used in Object-Oriented Programming
When to Use

Use when creating:
Users
Employees
Products
Records

Simple quick summary of the abovementioned functions

Other lists of functions which were noticed while referring to other sites:

  • Generator Function
  • Higher-Order Function
  • Nested Functions
  • Pure Functions
  • Default Parameter Function
  • Rest Parameter Function

Scenario 1:

*Function to find even or odd number *

<!DOCTYPE html>
<html>
<head>
    <title>Odd or Even</title>
</head>

<body>
    <script>
        // Declare a number
        let number = 9;

        // Function to check odd or even
        function addorEven() {
            if (number % 2 == 0) {
                return 100; // Even number
            } 
            else {
                return 200; // Odd number
            }
        }

        // Call the function
        let findoutvalue = addorEven();

        // Print the result
        console.log(findoutvalue + 20);
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

220
Enter fullscreen mode Exit fullscreen mode

Scenario 2:

Function to find the biggest number

<!DOCTYPE html>
<html>
<head>
    <title>Function Demo</title>
</head>

<body>
    <script>

        // Function to find the biggest number
        function bigNumber(a, b, c) {

            if (a > b && a > c) {
                return "A is biggest";
            }

            else if (b > a && b > c) {
                return "B is biggest";
            }

            else {
                return "C is biggest";
            }

        }

        // Call the function
        let numberInput = bigNumber(10, 11, 9);

        // Print the result
        console.log("The final result of biggest number: " + numberInput);

    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

The final result of biggest numberB is bigger

Enter fullscreen mode Exit fullscreen mode

Top comments (0)