Annapoorani Kadhiravan

Posted on Jun 14

More about function in JS

#webdev #javascript #programming #tutorial

Why Do We Need Functions?

Suppose we want to add two numbers several times.

Without functions:

let result = 10 + 20;
console.log(result);

result = 30 + 40;
console.log(result);

result = 50 + 60;
console.log(result);

This approach leads to code duplication.

Using functions:

function add(i, j) {
    let result = i + j;
    console.log(result);
}

add(10, 20);
add(30, 40);
add(50, 60);

Output:

30
70
110

Thus, functions improve:

Reusability
Readability
Maintainability
Modularity

Naming Conventions for Functions

Function names should follow certain rules.

Rules

1. Function names cannot contain spaces

❌ Invalid

function add numbers() {}

✅ Valid

function addNumbers() {}

2. Function names cannot use reserved keywords

❌ Invalid

function return() {}

function for() {}

3. Function names should describe the work performed

Good examples:

calculateTotal()
findMaximum()
printDetails()
generateOTP()

Bad examples:

abc()
xyz()
temp()

What is Camel Case?

Camel Case is a naming convention where:

The first word starts with lowercase.
Every subsequent word starts with an uppercase letter.

Example:

calculateTotalAmount()
findStudentMarks()
printEmployeeDetails()

The capital letters resemble the humps of a camel.

Hence the name Camel Case.

Function Declaration

A function declaration defines a function.

Example:

function add(i, j) {
    return i + j;
}

Here:

add is the function name.
i and j are parameters.

Function Call

Calling or invoking a function means executing it.

add(10, 20);

Here:

10 and 20

are called arguments.

Parameters vs Arguments

This is one of the most commonly asked interview questions.

Parameters	Arguments
Variables in function definition	Values passed during function call
Receive values	Supply values
Exist inside the function	Exist outside the function

Example:

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

add(10, 20);

Parameters:

a, b

Arguments:

10, 20

Types of Parameters

1. Formal Parameters

Declared inside the function definition.

function add(a, b)

Here:

a and b

are formal parameters.

2. Actual Parameters (Arguments)

Passed during function call.

add(10,20);

Here:

10 and 20

are actual parameters.

3. Default Parameters

Provide default values.

function greet(name = "Guest")
{
    console.log(name);
}

greet();

Output:

Guest

4. Rest Parameters

Used when the number of arguments is unknown.

function add(...numbers)
{
    console.log(numbers);
}

Does a Function Always Need to Return a Value?

No.

Functions may be:

Return Functions

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

Non-return Functions

function display()
{
    console.log("Hello");
}

Both are valid.

Who Decides Whether to Use Return?

The programmer decides.

Use return when:

The result is needed elsewhere.
Another function needs the output.
Data should be stored.

Example:

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

let result = square(5);

Use console.log() when:

You only want to display something.

function greet()
{
    console.log("Welcome");
}

When Should We Use Return Statements?

Use return when:

✔ Performing calculations

✔ Returning values to another function

✔ Storing values in variables

✔ Building reusable utilities

Example:

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

let answer = multiply(5,4);

Output:

What Happens if Return is Missing?

function add(a,b)
{
    let result = a+b;
}

console.log(add(10,20));

Output:

undefined

Because the function didn't return anything.

Multiple Return Statements

Yes, multiple return statements are allowed.

Example:

function checkNumber(x)
{
    if(x>0)
        return "Positive";

    return "Negative";
}

Only one return executes.

Once return executes, the function terminates.

Can We Return Multiple Values?

Many beginners think this:

return "Biriyani",140,"Salem";

Output:

Salem

Because JavaScript evaluates the comma operator and returns the last value.

Correct Ways

Return an array:

return ["Biriyani",140,"Salem"];

Return an object:

return {
    food:"Biriyani",
    price:140,
    place:"Salem"
};

Does a Function Create the Value or Container?

Functions create values.

Variables act as containers.

Example:

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

The function creates:

Container:

let answer = add(10,20);

answer stores the value.

Function Hoisting

Function declarations are hoisted.

Example:

greet();

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

Output:

Hello

JavaScript internally moves the function declaration to the top.

What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.

Hoisting vs Undefined

Example:

console.log(x);

var x=10;

Output:

undefined

Because:

Internally:

var x;

console.log(x);

x=10;

Function hoisting:

hello();

function hello()
{
    console.log("Hi");
}

Output:

Hi

JavaScript is Pass-by-Value

Variables themselves are not passed.

Only values are passed.

Example:

function change(x)
{
    x=100;
}

let num=10;

change(num);

console.log(num);

Output:

Because only the value 10 was copied into x.

JavaScript vs Java Functions

JavaScript	Java
Dynamic typing	Static typing
Return type optional	Return type mandatory
Functions can be standalone	Methods belong to classes
Supports first-class functions	Functions are methods
Flexible parameter count	Parameter count fixed

What is function hoisting?

Functions are moved to the top of their scope during execution.

Can a function have multiple returns?

Yes, but only one executes.

What happens after return?

The function terminates immediately.

Is return mandatory?

No.

Difference between parameters and arguments?

Parameters receive values.

Arguments supply values.

What is camelCase?

A naming convention where the first word starts lowercase and subsequent words start with uppercase.

Example:

calculateTotalPrice()

What is the default return value?

undefined

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function
https://javascript.info/function-basics
https://www.w3schools.com/js/js_functions.asp