Functions in Javascript and programming languages generally are portions of code that perform one or more actions. One of the critical elements of a program, in this case of Javascript, is the functions. A function collects all the instructions to perform a specific task within a program. A function, therefore, is a (relatively) autonomous part of a program as it performs a specific task that can be repeated several times at different points of the program itself. Organizing a program in functions allows more excellent cleanliness of the source code and, above all, facilitates the reuse of the code and, consequently, allows you to create more streamlined and easier-to-maintain and update programs.
The Functions In JavaScript
A function is a set of statements enclosed in a block of code, which a name can identify, accept arguments or input parameters, and return values. The syntactic scheme for defining a function is:
function name (arguments) {
// instructions
}
When announced, the capability isn’t executed right away. We tell the JavaScript motor that the demonstrated code block is given a name. The actual execution takes place with the invocation or call :
name (values);
The values entered in a function call are passed, that is, assigned, to the corresponding arguments of the function definition. In this example:
function sum () {
var z = 11 + 5;
return z;
}
var result = sum ();
We have characterized a capability without contentions that add two whole numbers and return the outcome. Calling the capacity makes the aggregate be performed and the outcome to be allocated to the variable output. Thus, in any case, the add () capability can add just the two numbers in the guidance block. To make it more broad, suitable to present two contentions that will address the numbers to be added:
function sum (x, y) {
var z = x + y;
return z;
}
In this case, the values to be added will be passed to the sum () function at the time of invocation: var result = sum (11, 5);
The Array Arguments
We can define no arguments in the sum () definition and access the values passed during the call through a predefined array: arguments. The function would look like this:
function sum () {
var z = arguments [0] + arguments [1];
return z;
}
We don’t determine the contentions close to the capability name for this situation, yet we access them utilizing the default array. The accessibility of contentions permits you to make capabilities with an insufficient number of boundaries. For instance, we can add an endless number of values:
function sum () {
var z = 0;
var i;
for (i in arguments) {
z = z + arguments [i];
}
return z;
}
And we could call the function to add any number of values:
sum (2, 78);
sum (17, 32, 4, 19, 52);
With the advent of ECMAScript 6, other elements enrich the flexibility of argument management, such as the ability to specify default values :
function sum (x = 0, y = 0) {
var z = x + y;
return z;
}
So if an argument is not passed at the time of the call, it is assigned the specified default value instead of the undefined value. So, for example, calling sum () with no arguments will return the value 0 instead of NaN.
Also Read: The Main Objects Of Javascript
Specify The Rest Parameter
Another novelty introduced with the new standard version is the possibility to specify the rest parameter: a special notation to indicate an indefinite list of additional arguments. Suppose we want to define a function that implements various arithmetic operations and takes the name of the procedure to be performed as its first argument and then a variable number of values on which to operate.
function performOperation (x, … y) {
var z = 0;
switch (x) {
case “sum”:
for (i in y) {
z = z + y [i];
}
break;
case “multiply”:
for (i in y) {
z = z * y [i];
}
break;
case “divide”:
z = y [0] / y [1];
break;
default:
z = NaN;
break;
}
return z;
}
The x argument represents the operation’s name to perform, and the y argument the rest of the values to pass to the function. The notation of the argument preceded by dots captures the list of arguments following the first and makes it available within the function in the form of an array. The approach is similar to the default arguments array, but while this captures all of the function’s arguments, the rest parameter only captures more arguments than the ones specified individually. We can invoke the function in one of the following ways:
runOperation (“sum”, 12, 54, 2, 7, 12);
runOperation (“multiply”, 4, 11, 32);
runOperation (“divide”, 45, 9, 6, 17);
The same notation as the rest parameter can be used in calls to functions with several arguments. In this case, we speak of a spread operator, i.e., an operator that spreads the values contained in an array on the arguments of a function, as in the following example:
var addendi = [8, 23, 19, 72, 3, 39];
sum (… addends); The call with the spread operator is equivalent to the following call:
sum (8, 23, 19, 72, 3, 39);
The Return Statement
The function’s body can have zero or more times the return statement that allows you to terminate and return a value to the code that called it. This will enable you to assign the value returned by a function to a variable or use a function within an expression. In this example:
function decode (number) {
switch (number) {
case “one”:
return 1;
break;
case “two”:
return 2;
break;
case “three”:
return 3;
break;
default:
return NaN;
break;
}
}
The function terminates and returns a value as soon as it finds a match to the argument. However, limiting the number of returns in a function to just one is a good idea. This makes the code more readable and maintainable.
Global And Local Variables: The Scope
The scope or scope of a variable is the part of a script within which it can be referenced. Variables declared within a function are called local to the function since they are accessible only within its body. Variables declared outside any function are global and accessible from anywhere in the script, even within functions. Here:
var x = 10;
var y;
function increment () {
var z = 5;
x = x + z;
}
increment ();
y = x + 1;
We declare two global variables, x and y, also accessible within the function increment (), and the function accesses x to increment it by the value of the local variable z. The value of the variable x after invoking the function increment () will be 15, and the final value assigned to y will be 16. Local and global variables can have the same name, but ambiguities arise whose resolution depends on the rule that refers to the scope closest to using the variable. Therefore, it is advisable to declare variables at the beginning of the scope, for example, at the beginning of the body of a function.
The Let Statement
To create a specific scope for one or more variables, we can use the let statement, which, defined by the ECMAScript 6 specifications, allows you to declare one or more variables similarly to var. Still, unlike the latter, it limits the variable’s scope to the block of code, statement, or expression in which it is used. In the following code:
var x = 10;
var y;
{
let x = 20;
y = x + 1;
}
y = x + y;
We will have a code block level extension where the variable x proclaimed through let conceals the outer one pronounced with var. The end product joins the upsides of the two homonymous factors. Using the let statement is useful in iterations, such as in the example in which we declare and use the variable “i” only within the loop, avoiding any collisions with other homonymous variables defined in outer scopes:
var x = 0;
for (let i = 0; i <10; i ++) {
x = x + 1;
}
Predefined Functions
JavaScript has predefined functions that are useful in some activities and can be invoked anywhere in the script. The parseInt () and parseFloat () functions allow you to convert a string to an integer and decimal value, respectively. The first has two boundaries: the string to be changed over and a discretionary one that shows the premise of the numeric portrayal framework utilized. The second takes a solitary contention and returns a whole number or decimal numeric worth, given the presence of the decimal separator.
The isNaN () function takes an argument and returns true if its value is NaN. That is, it is not a valid numeric value. Otherwise, isFinite () returns true if its argument value differs from Infinity and NaN. When a string represents a URI it is advisable to use the encodeURI () function which excludes the characters, /?: @ & = + $ # From the encoding. The counterpart is the decode URI () function, which returns the decoded string. The encodeURIComponent () function also encodes the special characters excluded from the encodeURI (): it is designed to encode the values of any parameters passed in a URI. The corresponding decode function is decodeURIComponent ().
Also Read: How The Foreach Loop Or Loop Foreach Works