How to Create a Function in JavaScript

Want to learn JavaScript functions? This tutorial will give you complete information about JavaScript functions. In this tutorial, you’re going to learn what is javascript function. How does JavaScript function work? Some real-life examples. And how to call and create a function in JavaScript with examples.

So, let’s begin.

What is JavaScript Function?

A function in JavaScript is a block of code that performs specific tasks when we call it in the program. A JavaScript function only works when something calls it in a program.

The concept of functions is the same in almost all programming languages. By creating a function, we can reuse code many times in our program. It saves time and effort.

Example of Functions in JavaScript

For example, you write code in JavaScript daily. And one day, you found that one piece of code is being used on daily basis. And you waste daily 60 minutes writing that code. So, you can solve this problem by just simply creating a JavaScript function.

After creating that function, you don’t have to write that code again. Whenever you will call the function in your program the statements will automatically execute.

Don’t worry. In this guide, we’ll show you how to create and call a function in JavaScript.

How JavaScript Function Works?

First, see the syntax of the function in javascript. Then I’ll explain it with a real-life example of a function.

To create a function in JavaScript, you must know the syntax of the JavaScript Function first. Let’s have a look at the syntax of the function.

JavaScript Function Syntax:

In JavaScript, a function starts with a function keyword, with a function name and a pair of parenthesis ( ). And all the code comes inside the pair of curly brackets { }.

In the parenthesis (), we use parameters separated by commas. Like this (parameter1, parameter2, parameter, …).

Parameters (also known as function arguments) are the values that are passed during the function calls.

The image below is clearly showing an example of the syntax.

JavaScript Function Syntax Example

Explanation:

  • The keyword is necessary to declare a function in JavaScript.
  • Function name: You give any name to your JavaScript function. According to the general rules, you can start a function name with numbers, letters, $ signs, and underscores just like variables.
  • Parameters: parameters are values that we pass to a function when we call it.
  • Code inside curly brackets will execute when we make a function call.

Real Life Example

In real life, for example, you work in a school. And your only job is to make the results of the mathematics papers. And every time, the principal of the school sends a peon to take the student’s marks sheet of a math paper.

Now imagine, in this whole process, you’re a function that is doing the job by making marks sheet. The peon is an argument or parameter, that is passing the information to the (function) about the math paper. The principal is a user that is making a function call mean sending the arguments. The marks sheet of a math paper is a function’s return value.

Hope you have understood.

Now you know the syntax. It’s time to create a function in JavaScript.

So, let’s see how to create and call a function in JavaScript.

Let’s start with a simple one. I take a real-life example to demonstrate it.

How to Create a Function in JavaScript

We’re going to solve a simple math problem through a JavaScript function.

Let’s suppose, we have a circle and we want to find the area of a circle. You know the formula to find the area of a circle. You can see this in the image below.

To find the area of a circle, we find the radius of a circle first. And then take its square and multiply it by pi. It’s a simple example.

area of a circle formula to use in JavaScript function

Now, let’s create a function in JavaScript to find the area of a circle.

With this function, whenever we want to know the area of a circle in our program, we can do it by simply calling a function at any time. It will save much time and you don’t have to write formulas again.

Note before seeing the code: If you don’t know how to insert JavaScript in HTML. Then, see these 3 ways to add JavaScript in HTML.

Code Example:

In the below code, I’m using the JavaScript code before the ending </body> tag inside <script> tags.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    
    <!--JavaScript Code-->
    <script>

        function areaofcircle(r) {
            return 3.1416*(r*r);        //pi = 3.1416
        }

    </script>

</body>
</html>

Note: The javascript code must be inside the <script> tags.

Code Explanation

  • I created a function in JavaScript with the name areaofcircle() followed by the function keyword.
  • Then, I defined a parameter inside the parenthesis which is r. It will pass the value of the radius of a circle to function.
  • Inside the JavaScript function, I used the return keyword. It is used to return the value of a particular statement.
  • After the return, I used the formula to find the area of a circle.

Now you know to create a function in JavaScript.

It’s time to call a function to check that is it working correctly or not.

How to Call a Function in JavaScript

To call a function, write a <p> tag inside the body of the HTML and give it an id with any name. This will display the answer on the HTML webpage.

Then, see line no. 18 in the code below.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    
    <p>
        If the radius of a circle is 16 then the area of a Circle will be: <p id="demo"> </p>
    </p>
    
    <!--JavaScript Code-->
    <script>

        function areaofcircle(r) {
            return 3.1416*(r*r);        //pi = 3.1416
        }
        document.getElementById("demo").innerHTML = areaofcircle(16);

    </script>

</body>
</html>

To call a function to do the job, I used a document.getElementById method to write the answer inside HTML <p> tags.

After that inside the function area of a circle (), I used the value of the radius that will go to the function and return the answer.

When I called a function, I gave it the value of the circle’s radius which is 16. You can give any value. The function will return the answer in HTML which will output this below after executing.

Code Output:

If the radius of a circle is 16 then the area of a Circle will be:
804.2496

That’s it, now you know how to create a function in JavaScript.

You have a lot to learn about JavaScript. This is the beginning.

If you want to know more about the functions then see the guide on Wikipedia.

If you have any questions then feel free to ask in the comment section below.