What is a function?

It is a block of reusable code. the function allows us to write code once and reuse it again as many times you want just by calling this function.

Syntax

Function function_name(parameter1,parameter2,..)
{
}

In javascript, a function can be declared using function keyword followed by the name of the function.

Function parameters are optional and parameter names must be in parentheses separated by a comma.

document.writeln("JavaScript function demo");

function add(para1,para2) {
    return para1 + para2;
}
document.writeln("Addition of Variables result = "+ add(1,2));

In the above code, we call add(1,2) function with 2 parameters but what happened when we don’t pass any value to the function and what is the output of this function.

document.writeln("JavaScript function demo");

function add(para1, para2) {
    document.writeln("<br/>");
    document.writeln("<b>para1 = </b>" + para1 + "<b> para2 =</b> " + para2);
    document.writeln("<br/>");
    document.writeln("<br/>");
    return para1 + para2;
    
}



document.writeln("<br/>");
document.writeln("Addition of Variables result = "+add());

we didn’t pass any value to add function in above code so when we don’t pass any value it will take undefined as value and the result of NaN means Not-a-Number

Another case is that we pass only one parameter value and another not see below code

document.writeln("JavaScript function demo");

function add(para1, para2) {
    document.writeln("<br/>");
    document.writeln("<b>para1 = </b>" + para1 + "<b> para2 =</b> " + para2);
    document.writeln("<br/>");
    document.writeln("<br/>");
    return para1 + para2;
    
}



document.writeln("<br/>");
document.writeln("Addition of Variables result = "+add(10));

It will also give NaN as result but first parameter is 10 as shown in image.

Case 4:

In this case, if we pass more than defined parameters to function what will happen?

The function gets called and not giving any error it simply takes the first 2 parameters and others are discarded simply.

document.writeln("JavaScript function demo");

function add(para1, para2) {
    document.writeln("<br/>");
    document.writeln("<b>para1 = </b>" + para1 + "<b> para2 =</b> " + para2);
    document.writeln("<br/>");
    document.writeln("<br/>");
    return para1 + para2;
    
}



document.writeln("<br/>");
document.writeln("Addition of Variables result = "+add(10,20,30,30));

Case 5: what will happened when we don’t write a return statement?

In this case, the function gets executed properly but if our function is missing with value then it will explicitly return undefined value.

document.writeln("JavaScript function demo");

function add(para1, para2) {
    document.writeln("<br/>");
    document.writeln("<b>para1 = </b>" + para1 + "<b> para2 =</b> " + para2);
    document.writeln("<br/>");
    document.writeln("<br/>");
    var sum = para1 + para2;

    document.writeln("Sum Inside function " + sum);
    document.writeln("<br/>");
    document.writeln("<br/>");

}



document.writeln("<br/>");
document.writeln("Addition of Variables <b> result out side the  function= " + add(10, 40) +"</b>");

Different way’s to define a function in JavaScript?

In JavaScript, by default at run-time JavaScript moves all function declaration to the top of the current scope. This is called a function hoisting. The reason for calling a function before it declared is this.

addNumbers(10, 20);



function addNumbers(first_para, second_para) {
    var result = first_para + second_para;
    document.writeln("First Parameter :- " + first_para + " Second Parameter : " + second_para);
    document.writeln("<br/>");
    document.writeln(first_para + "+" + second_para + " = " + (first_para + second_para));
}

In the above case, we call the function first before its declaration or definition.

Another way to define a function is by using function expression.

Function Expression In JavaScript:

The function expression allows us to define a function using an expression generally assign the variable to it. There are 3 different ways of defining a function using function expression.

Anonymous Function Expression:

In this type we are not giving a function name to function instead that function is assigned to variable and we call this variable like a function name.

var add = function (first_para, second_para) {
    var result = first_para + second_para;
    document.writeln("First Parameter :- " + first_para + " Second Parameter : " + second_para);
    document.writeln("<br/>");
    return result;
};


var sum = add(10, 20);
document.writeln("Sum is =>" + sum);

In this anonymous function expression case function hoisting is not working. You can call this function only when you first define and after that you call this function.

Named Function expression:

This is similar to anonymous function expression. The difference is instead of assigning the variable to anonymous function we are assigning named function.

In below code you see we are giving add method name to this function. But we can’t call this function by using this addition name. If you try to access this function by using function name whatever you have given you will get following error

Uncaught ReferenceError: addition is not defined     at funcdefination.js:19

var add = function addition(first_para, second_para) {
    var result = first_para + second_para;
    document.writeln("First Parameter :- " + first_para + " Second Parameter : " + second_para);
    document.writeln("<br/>");
    return result;
};


var sum = add(10, 20);
document.writeln("Sum is =>" + sum);

The name of this function is accessible only inside that function. Then what is use of this whenever you want to call this function recursively you can use this function.

Self Invoking Function Expression:

These functions are like lambda function in C# and its also called as Immediately-Invoked Function expression (IIFE), self-executing anonymous functions and Self-invoked anonymous function also.

var factorial = (function fact_function(number) {

    if (number <= 1)
        return 1;
    else
        return number * fact_function(number - 1);
})(5);



var fact = factorial;
document.writeln("Factorial of 5 is =>" + fact);

Sagar Jaybhay

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer at Software Company. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.