How To Write A Function in JavaScript

How to write a function in JavaScript
A JavaScript function is a block of code that consists of a set of instructions to

perform a specific task. A function can also be considered as a piece of code that can
be used over again and again in the whole program, and it also avoids rewriting the
same code. It also helps programmers/coders to divide a huge program into several
small functions.
Types of Functions
There are two types of functions in JavaScript like other programming languages
such c, c++, and java etc.
o Pre-defined Functions
o User-defined Functions
Here we are going to learn, how to write a user-defined function

in JavaScript:
To create a function in JavaScript we have to use the"function " keyword before
writing the name of our function as you can see in given syntax:
Syntax of creating function
Function functionname( parameters list)

{
Lines of code to be executed/set of instructions to be executed in order to perfor
m a specific task.
}
Before using a function or we can say before calling a function in our program we
have to define its definition in between the curly braces. As per your requirement,
we can leave the parameter list blank as you can see in the syntax given above.
Example:
<scripttypescripttype="text/javascript">

</script>
How to call the function
We can call the function when we want to use the function in the program by writing
its name as you can see below:
Hello();
Let's see a program in which, we will create a function and use it in the
program.
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
functionmyfirstFunction()
{
document.write("This is just a simple user-defined function.<br />");
}
myfirstFunction();
</script>
</head>
<body>
</body>
</html>
In the above-given program, we have created a function with "myfirstFunction"

name and in the definition of this function, we displayed a message "This is just a
simple user-defined function" by using the document.write(); function. To print that
message, we first need to call the function as you can see in program.
Output
To call the function somewhere else in the script, we just have to write its name as
you can see in the given example:
Example
<html>
<head>
<script type = "text/javascript">
functionsayhi() {
document.write ("Hello there!");
}
</script>
</head>
<body>
<p>Click the given button to call the function</p>
<form>
<input type = "button" onclick = "sayhi()" value = "Say Hello">
</form>
</body>
</html>
Output
Now click on the given button

Function With Parameters
The function we have used in our program is without parameters (or we can say
parameter less) because we have not given any parameter in the parameters list and
left it empty. But we can also use parameters with function and we can use any
number of parameters in our function but they must be separated by comma. These
parameters are captured by the function and later any operation can be performed
on these parameters inside the function.
Syntax of creating a function with parameters
functionfunctionname( parameter1,parameter2,....parameterN)
{
Lines of code to be executed/set of instructions to be executed in order to perform a spe

cific task.
}
We can understand how to use parameters with function more easily with the help of
an example:
Program
<html>
<head>
functionsayHello(name, age,gender) {
document.write (name + " is " + age + " years old" + " and gender is " + gender);
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello(' Isabella', 23,'female')" value = "Say Hello"
>
</form>
</body>
</html>
In this program, we created a function named "sayHello ()" with three parameters:
name, age, and gender, and defined it in the head section of the HTML document. To
use this function, we also created a button using the form tag in the program's body
section and pass the values as arguments. When the user clicks that button, our
function is called and gets executed.
Output
Now click on the given button.

Function with return statement
In JavaScript, we can make functions that are able to return a value. To create such
type of function, we have to use the return statement, but it must be the last
statement in the body of the function (or in the definition of the function). Another
essential thing to remember is that we can use only one return statement in a
function. If we try to use several return statements in a function, only one return
statement is considered, which is reached by the program's control first.
Syntax of function with return statement
Function functionname(arg1, arg2)

{
Set of instructions to be executed
return val1;
}
We can understand how to use the return statement in a function with the help of an
example:
Example
<html>
<head>
functioncombinestring(string1, string2) { // function1
varcompleteString;
completeString = string1 + string2;
returncompleteString;
}
functionsecondFunction() {
var result;
result = combinestring('Java', 'Script');
document.write (result );
}
</script>
</head>
<body>
<p>Click the following button to see the function in action</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
</body>
</html>
Explanation of the program
In this program, we have created two functions: combinestring(string1, string2),

secondFunction(), and defined their definition in the head section of
the HTML document.
Function 1
In the body of "combineString(string1, string2)" function, we created a variable with

the name "completestring" to store the string after combining both strings. To return
the value stored in this variable, we have used a return statement as you can see in
the program.
Function2
In the body of secondfunction(), we have created a variable that is "result". We have

called our first function "completeString(string1, string2)". When the
"secondfunction()" is called the "completeString(string1,string2) is also called and
the result of this function is stored in the variable "result".
When the execution of the "completeString(string1, string2) function gets completed,

the returned value/data gets stored in the "result" variable and in the body of
"secondfucntion()" function, we have displayed the value stored in the variable
"result" by using document.write() statement.
To call the "secondfunction()," we have created a button for the user using the form
tag. When the user clicks on that button, our secondfucntion() will be triggered.
Note: As you can see in the program, we have used the "return" statement as the last
instruction in the body of the "completeString(string1, string2) function.
Output
Click on the given button.

How To Write A Function in JavaScript

Uploaded by

How To Write A Function in JavaScript

Uploaded by

How to write a function in JavaScript

A JavaScript function is a block of code that consists of a set of instructions to

Here we are going to learn, how to write a user-defined function

Syntax of creating function

Function functionname( parameters list)

In the above-given program, we have created a function with "myfirstFunction"

Now click on the given button

Syntax of creating a function with parameters

Lines of code to be executed/set of instructions to be executed in order to perform a spe

Now click on the given button.

Syntax of function with return statement

Function functionname(arg1, arg2)

Explanation of the program

In this program, we have created two functions: combinestring(string1, string2),

In the body of "combineString(string1, string2)" function, we created a variable with

In the body of secondfunction(), we have created a variable that is "result". We have

When the execution of the "completeString(string1, string2) function gets completed,

Click on the given button.

You might also like