JavaScript Function (with Examples)

This post is published to provide all the information regarding the function in JavaScript like:

What is a Function in JavaScript?
How to Create and Define a Function in JavaScript?
How to Execute a Function in JavaScript?
JavaScript Function Return Value
Why do we need a Function in JavaScript?
JavaScript Function Examples
JavaScript Function with 1 Parameter Example
JavaScript Function with 2 Parameters Example
JavaScript Function with 3 Parameters Example

What is a Function in JavaScript?

A function in JavaScript is a block of code, used to perform the defined task. For example:

function printHello()
{
   console.log("Hello");
}

The above function named printHello() prints the Hello on the console output, when it will be called or invoked.

How to Create and Define a Function in JavaScript?

To create and define a function in JavaScript, follow the syntax given below:

function functionName(para1, para2, para3, ..., paraN)
{
   // block of code
   // to define the work of function
}

where:

function is the keyword used to define a function
functionName is the name of the function. You need to follow some rules while naming a function. Refer to rules to name a variable to understand regarding naming of a variable or function name
para1, para2, para3, paraN are the list of parameters. Parameters list are optional.

For example:

function message()
{
   document.getElementById("paraOne").innerHTML = "Hey, JavaScript is fun!";
   document.getElementById("paraTwo").innerHTML = "Is not it?";
}

How to Execute a Function in JavaScript?

To execute a function, we need to call it. For example:

message();

calls a function named message(). For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p id="paraOne"></p>
   <p id="paraTwo"></p>

   <script>
      function message()
      {
         document.getElementById("paraOne").innerHTML = "Hey, JavaScript is fun!";
         document.getElementById("paraTwo").innerHTML = "Is not it?";
      }

      message();
   </script>

</body>
</html>

Output

JavaScript Function Return Value

The return stament or keyword is used to return a value from a function after executing it. For example:

function cube(num)
{
   return num*num*num;
}

return the cube of num. Therefore, whatever the value we passed to the function named cube(), its cube will be returned. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p>Cube of 5 = <span id="res"></span></p>

   <script>
      function cube(num)
      {
         return num*num*num;
      }

      document.getElementById("res").innerHTML = cube(5);
   </script>

</body>
</html>

Output

Cube of 5 =

The value 5 from cube(5) initialized or copied to num (the parameter of cube() function), and using the return statement or keyword, the value of num*num*num, which will be 5*5*5 or 125 will be returned. Therefore the following statement from above (previous) example:

document.getElementById("res").innerHTML = cube(5);

will become:

document.getElementById("res").innerHTML = 125;

Wherever the return statement occur in a function, the execution of the function will get terminated. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p id="paraOne"></p>
   <p id="paraTwo"></p>

   <script>
      function message()
      {
         document.getElementById("paraOne").innerHTML = "Hey, JavaScript is fun!";
         return;
         document.getElementById("paraTwo").innerHTML = "Is not it?";
      }

      message();
   </script>

</body>
</html>

Output

That is, all the block of codes available after the return statement, in a function, will be skipped to execute.

Why do we need a Function in JavaScript?

We need a function in JavaScript to wrap some block of code in a function to use it multiple times. That is, we need a function to execute some block of code/statement multiple or required number of times without writing that block of code multiple times. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p>Cube of 8 = <span id="resOne"></span></p>
   <p>Cube of 12 = <span id="resTwo"></span></p>
   <p>Cube of 33 = <span id="resThree"></span></p>

   <script>
      function cube(num)
      {
         return num*num*num;
      }

      document.getElementById("resOne").innerHTML = cube(8);
      document.getElementById("resTwo").innerHTML = cube(12);
      document.getElementById("resThree").innerHTML = cube(33);
   </script>
   </script>

</body>
</html>

Output

Cube of 8 =

Cube of 12 =

Cube of 33 =

The code to calculate the cube of a number is created once, and is used for 3 times. This is the way, the use of function benefits us.

Please note: Variable defined inside a function is local to the function where it is defined.

JavaScript Function Examples

Now I think, it is the time to take some examples regarding the function in JavaScript, to clear all the remaining doubts. Let me start with a function without parameter.

JavaScript Function without Parameter Example

<!DOCTYPE html>
<html>
<body>

   <script>
      function fresherearth()
      {
         console.log("My name is Justin");
         console.log("I'm from 'St. Louis, USA'");
         console.log("I'm here since last 4 years.");
      }
      fresherearth();
   </script>

</body>
</html>

The snapshot given below shows the sample output produced by above JavaScript function example:

JavaScript Function with 1 Parameter Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>∛64 = <span id="res"></span></p>

   <script>
      function fresherearth(num)
      {
         return Math.cbrt(num);
      }
      document.getElementById("res").innerHTML = fresherearth(64);
   </script>
   
</body>
</html>

Output

∛64 =

JavaScript Function with 2 Parameter Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Gross Salary = $68400 and Tax Deduction@22%</p>
   <p>Actual Salary after Tax Deduction  = <span id="res"></span></p>

   <script>
      function inHandSalary(totalSalary, taxPercentage)
      {
         let taxAmount = (taxPercentage*totalSalary)/100;
         return (totalSalary-taxAmount);
      }
      document.getElementById("res").innerHTML = inHandSalary(68400, 22);
   </script>
   
</body>
</html>

Output

Gross Salary = $68400 and Tax Deduction@22%

Actual Salary after Tax Deduction =

JavaScript Function with 3 Parameter Example

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Principle Amount = $60000, Rate of Interest = 7.8%, Time = 4 Years</p>
   <p>Simple Interest based on above values  = <span id="res"></span></p>

   <script>
      function si(p, r, t)
      {
         return ((p*r*t)/100);
      }
      document.getElementById("res").innerHTML = si(60000, 7.8, 4);
   </script>
   
</body>
</html>

Output

Principle Amount = $60000, Rate of Interest = 7.8%, Time = 4 Years

Simple Interest based on above values =

In similar ways, you can use as many number of parameters as required to the JavaScript function. It is up to you and your application's requirement.

JavaScript Online Test

« Previous Tutorial Next Tutorial »