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.

• Pre-defined Functions
• 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

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

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:

Let's see a program in which, we will create a function and use it in the program.

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

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

We can understand how to use parameters with function more easily with the help of an example:

Program

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

We can understand how to use the return statement in a function with the help of an example:

Example

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.