Javascript Functions

Functions that allow us to structure our code into smaller and more reusable units.

When we write a program, we often need to perform the same action in many places. For example, we want to show a message to the users when they complete an action.

To avoid repeating the same code all over places, we can use a function to wrap that code and reuse it. We can these function as many times as needed.

There are many built-in functions such as alert() and console.log() provided by javascript.


Advantages of Functions

Following are the advantages of using functions in our code:-

  • Code reusability: We can call a function several times so it save coding.
  • Less coding: It makes our program compact. We don’t need to write many lines of code each time to perform a common task.

Function Syntax

To declare a function, we will start with function keyword followed by function name, and then parentheses (). Following is the syntax to use it:-

Syntax:-
function functionName() {
    // function body
    // ...
} 

Input:-
function getData() {
    console.log(“This is a function”)
} 

These function name can contain letters, digits, underscores and dollar signs  and it must be a valid JavaScript identifier. By convention, the function name should start with a verb like getData(), fetchContents(), or isValid().


Function Arguments

Arguments are the different parameters which we can pass within a function parenthesis.

A function can accept zero, one, or multiple parameters. If there are multiple parameters, we need to separate them by commas (,). Inside the function , the arguments (the parameters) behave as local variables.

Syntax:-
function functionName(parameter1, parameter2) {
    // function body
    // ...
} 

Input:-
function getData(a,b) {
    console.log(“This is a function with arguments”,a,b);
} 

These function name can contain letters, digits, underscores and dollar signs  and it must be a valid JavaScript identifier. By convention, the function name should start with a verb like getData(), fetchContents(), or isValid().


Function Arguments

Arguments are the different parameters which we can pass within a function parenthesis.

A function can accept zero, one, or multiple parameters. If there are multiple parameters, we need to separate them by commas (,). Inside the function , the arguments (the parameters) behave as local variables.

Syntax:-
function functionName(parameter1, parameter2) {
    // function body
    // ...
} 

Input:-
function getData(a,b) {
    console.log(“This is a function with arguments”,a,b);
} 

Invocation function

When we call a function, the function executes the code inside its body. This process is also known as invocation. To call a function, we use its name followed by the function arguments enclosed in parentheses.

Syntax:-
functionName(arguments); 

Input:-
getData(1,2); 

Function with return value

Return statement is required to stop execution of any function and control the value it should return. Every function in JavaScript returns undefined, unless otherwise specified.

Syntax:-
functionName(arguments){
	return expression;
}

Input:-
function sumData(a,b) {
    return a+b;
} 

Function Object

The purpose of function is to create a new Function object. It executes the code globally.

Inside the body of a function, we can access an object called arguments that represents the named arguments of the function.

For example, we can use the square bracket [] to access the arguments: arguments[0] returns the first argument, arguments[1] returns the second one, and so on.

Furthermore, we can use the length property of the arguments object to determine the number of arguments.

Syntax:-

functionName(); 
function functionName(){
	 //body of function
}
 
Input:-
getSum() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
getSum(1,2);

In the above example, getSum() function will take multiple arguments and output the sum out of it.


Function Hoisting

Function hoisting is a concept to use a function before it is declared. It is a mechanism that the JavaScript engine physically moves function declarations to the top of the code before executing them.

Syntax:-
new Function ([arg1[, arg2[, ....argn]],] functionBody) 
 
Input:-
getData();
getData() {
    console.log(“This is a hoisted function”)
}

Function methods

Following are the function methods which can be used within a code:-

UnitDescription
apply()It is used to call a function contains this value and a single array of arguments.
bind()It is used to create a new function.
call()It is used to call a function contains this value and an argument list.
toString()It returns the result in a form of a string.