Function In JavaScript: Types Of JavaScript Functions, Function Definition, Calling Function
Description:
Function in JavasSript- In programming, functions are very important structures. In structured programming, the complicated and large program is broken down into smaller units by assigning unique names to them. These units are called the subprograms. In JavaScript, subprograms are referred to as functions. Function in JavaScript makes your scripts more concise and readable. Therefore, a function is defined as:
A set of statements written to perform a specific task and having a unique name is called function. The function is invoked (or called) for executing with the reference of its name. the control transfers to the body of the function. After executing the statements of the function, the control returns back to the point where the Function in JavaScript was called along with the possible returned value.
Importance of Function in JavaScript:
Function in JavaScript is a complete and independent program. A single function can be called again and again from multiple places in a program to perform a particular task. The JavaScript function code is stored In only one place in memory, even though the function is called many times for executing in the program. If a program is written without using Function then there may be a repetition of the same piece of code at various places in the program.
Advantages of Function in JavaScript:
-
Easy to write a program:
We know that solving a problem becomes easier if we break it into a set of smaller tasks. Similarly, writing a large program becomes easier if we divide it into smaller parts each of which takes the form of a JavaScript function.
-
Easy to understand and modify the program:
The complexity of the program is reduced. It makes it easier to understand the logic of the program. It is also easy to make changes and detect errors when a large program is divided into subprograms.
-
Eliminate duplicate code:
If the same task has to be performed at more than one place in a program, then common code can be written as a function. The Function in JavaScript is called for executing with the reference of its name only. Thus the same set of instructions does not have to be written again and again to perform the same task. This reduces the total lines of code of the program.
-
Facilitate re-usability:
Function in JavaScript is written for one program that can be re-used into another new program. Thus, the programmer can develop a program quickly in a very short time.
Types of Function in JavaScript:
In JavaScript, functions are divided into two types. These are:
Built-in functions
User-defined functions
Built-in Function in JavaScript:
The predefined functions that are part of the programming language and can be used for different purposes are called built-in functions or library functions. These are ready-made subprograms. The built-in Function in JavaScript makes the programmer’s job easier to design the program and reduce the program development time. JavaScript provides several built-in Functions in JavaScript that can be used to solve different kinds of problems.
User-Defined Function in JavaScript:
In JavaScript, a programmer can write his own functions to perform specific tasks. These functions are referred to as programmer-defined Functions in JavaScript or user-defined Function. A Script may contain many user-defined functions.
Function in JavaScript Definition:
The JavaScript function definition is the actual code (set of statements) that is written for the function to perform a specific task. a function must be defined before it can be used (called for execution). JavaScript function can be defined:
- In the <head> section of html document.
- In the <body> section of html document.
- You can also place the code of several JavaScript functions into a separate text file. The extension of the file must be js ( js stands for JavaScript). The JavaScript functions definitions stored in the external file cannot contain the script tag.
Usually, the definitions of JavaScript functions are placed in the <head> section of the Html document.
The function definition consists of two parts. These are:
- The header of JavaScript function definition
- Body of JavaScript function definition
The header of JavaScript function definition:
The first line of a function definition is called a function header. It is also referred to as function declarator. It indicates the start of the function definition.
Body of JavaScript function definition:
The set of statements that are written between the curly braces just after the header of the function definition is called the body of the function. The curly brackets ( { and }) define the start and end of the Function. The set of statements are written for the function inside the curly brackets. The body of function performs a specific task when Function is called for executing from any place of the program.
Defining a Function in JavaScript:
The general syntax to define the function is as follows:
function fname(parameter list)
{
Body of the function;
}
Where
Function:
In JavaScript, the keyword ‘function’ is used to define the function. It must be written in lowercase letters, otherwise, an error occurs.
fname:
specifies the name of the function. The rules for naming a function are similar to the rules for naming a variable. Each Function must have a unique name.
parameter list:
represents the list of parameters or arguments separated by comma (,). They may be in the form of variables or constant values. They are passed to the function when the function is called for execution. The variables used in the header of the function definition are treated as local variables. They cannot be declared in the body of the Function in JavaScript.
Note that a Function with no parameter must include the parentheses () after the function name.
For example, to display a message, the Function is the definition as:
function test()
{
document.write(“First Function”+ “<br>”);
document.write(“ok”);
}
In the above Function definition “function test()” specifies the header of the function definition while two statements enclosed in braces are the body of function definition.
Calling a Function in JavaScript:
Execution of the statements of the function to perform a specific task is known as the calling of the function. A Function is called for executing with the reference of its name. if a function has parameters then actual values in the form of variables or constants are also given in parentheses after name function. If a Function has no parameter, then the parentheses are left blank.
Similarly, if a function returns a value then it can be called in an arithmetic expression, or can directly be called in an output statement.
When the Function is called for executing, control transfers to the function definition, and its statements are executed. After executing the function statements, then control transfers back to the calling function/script.
You can call a function from anywhere within the page or even from other pages if you include the external file that contains the function definition.
JavaScript code is given below to print a message by using a function:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <script type="text/JavaScript"> function message() { document.write("Examples of Scripting Languages are: "+ "<br>"); document.write("JavaScript & VBscript"+"<br>"); } </script> </head> <body> <script type="text/javascript"> message(); document.write("script is terminated"); </script> </body> </html> |
In the above script, the function message() is defined in the <head> section. This function is call for executing using statement “message();” in the <body> section. When this function call statement is executed, the control will be transferred to the function definition. The Function message() has only two statements to print a message. After the execution of these statements, the control returns back to the <body> section and transfers to the next statement that comes after the function call.
Example Write JavaScript code using the function that print pattern of asterisks (*) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <script type="text/JavaScript"> function asterisks() { var u ,i; for (u=9; u>=1;u-=2) { for(i=1; i<=u;i++) document.write("* "); document.write("<br>"); } } </script> </head> <body> <script type="text/javascript"> asterisks(); </script> </body> </html> |
Related Article:
https://programmingdigest.com/js-array-how-to-use-array-types-of-array-and-storing-values-in-array/
