How to Define and Call a Function in javascript?

A JavaScript function is a group of reusable all the source code which can be called any where in your web page or script. This terminate the required of writing the same source code repete and repete. It useful programmers in writing modular or MVC based source codes. Functions allow a devloper to divide a big script project into a number of small as well as manageable functions.

JavaScript Functions

A JavaScript function is a one type of the block of code designed to execute a specific module.A JavaScript function is executed when “entity” invokes it (calls it)

Syntax:

function YourJSfunctionName(Parameter1, Parameter2, ..)
{
    // Some here Function body
}

Advantage of JavaScript function

There are Very Imp 2 Main advantages of JavaScript functions.

  • Code reusability:
  • Less coding:

Basic Example

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This JS example calls a function which <a href="https://www.pakainfo.com/javascript-sum-array/" target="_blank" rel="noopener noreferrer">executes a calculation</a>, and returns the output:</p>
<p id="example"></p>

<script>
function getData(f1, f2) {
  return f1 * f2;
}
document.getElementById("example").innerHTML = getData(4, 3);
</script>

</body>
</html>

JavaScript Function Methods

how to call a function as well as learn to types of functions and call javascript function from html source code using javascript

Method Description
apply() This is helps to call a function data contains this data value and a single array of Parameters.
bind() This is helps to create a new function.
call() This is helps to call a function contains this value as well as an Parameters list.
toString() This data returns the output in a HTML form of a data string.

The Arguments Object

All the functions in JavaScript source code can use Parameters object by default. a Parameters object added value of each parameter.

The Parameters object is an array like object. You can supports it is a data values using index similar to array. therefor, it does not support array methods in js.

Read Also:  Vue.js Back to Top Component (vue smooth scroll)

Example: Arguments Object

<!DOCTYPE html>
<html>
<body>
	<h1>Example: JavaScript arguments object</h1>
	
	<script>
		function getMemberData(fname, lname) {
			alert("Welcome To " + arguments[0] + " " + arguments[1]);
		}

		getMemberData("Krunal", "Sisodiya"); 

		getMemberData("Hardik", "Sisodiya");

		getMemberData(250, 540);
    </script>
</body>
</html>

Example: Function Returning a Function

<!DOCTYPE html>
<html>
<body>
	<h1>Examples: Function returing a function</h1>
	<p id="tmail2"></p>
	<p id="tmail3"></p>
	
	<script>
		function multiple(f1) {

			function myfun(f2)
			{
				return f1 * f2;
			}
    
			return myfun;
		}

		var getdata = multiple(3);

		document.getElementById("tmail2").innerHTML = getdata(2); 
		document.getElementById("tmail3").innerHTML = getdata(3); 
    </script>
</body>
</html>

Calling a Function

Live Demo
<html>
   <head>   
      <script type = "text/javascript">
         function getMemberData() {
            document.write ("Greatting Sir");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the bellow button to call the js function</p>      
      <form>
         <input type = "button" onclick = "getMemberData()" value = "Welcome To Sir">
      </form>      
      <p>This terminate the required of writing the same source code repete and repete. It useful programmers in writing modular or MVC based source codes.</p>
   </body>
</html>

Function Parameters

<html>
   <head>   
      <script type = "text/javascript">
         function getMemberData(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the bellow button to call the js function</p>      
      <form>
         <input type = "button" onclick = "getMemberData('Krunal', 8)" value = "Welcome to Sir">
      </form>      
      <p>Functions allow a devloper to divide a big script project into a number of small as well as manageable</p>
   </body>
</html>

javascript function return | The return Statement

<html>
   <head>  
      <script type = "text/javascript">
         function mergeData(username, webname) {
            var complete;
            complete = username + webname;
            return complete;
         }
         function getMemberData() {
            var output;
            output = mergeData('Hardik', 'pakainfo.com');
            document.write (output );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the bellow button to call the js function</p>      
      <form>
         <input type = "button" onclick = "getMemberData()" value = "Call Function">
      </form>      
      <p>A JavaScript function is a group of reusable all the source code which can be called any where in your web page or script.</p>  
  </body>
</html>

Arrow functions in JavaScript

also you can learn here arrow function javascript.

<!DOCTYPE html> 
<html> 
<head><title>arrow function javascript</title></head>
<body> 
<script> 
	let Member = function(student, age) { 
		this.student = student; 
		this.age = age; 
		this.info = function() { 

		// logs Member 
		document.write(this); 

		setTimeout(function() { 
			// here this!=Member 
		document.write(this.student + " is " + this.age + 
											" years old"); 
		}, 3000); 
		} 
	} 
let student1 = new Member('John', 21); 

// logs : undefined is undefined years old after 3 seconds 
student1.info(); 
</script>	 
</body> 
</html> 

JavaScript parseInt() Function

<!DOCTYPE html> 
<html> 
<body> 
	<script> 
	
		f1 = parseInt("100"); 
		document.write('parseInt("100") = ' + 
		f1 + "<br>"); 
		
		f2 = parseInt("[email protected]"); 
		document.write('parseInt("[email protected]") = ' + 
		f2 + "<br>"); 
		
		f3 = parseInt("[email protected]"); 
		document.write('parseInt("[email protected]") = ' + 
		f3 + "<br>"); 
		
		f4 = parseInt("3.14"); 
		document.write('parseInt("3.14") = ' + f4 + "<br>"); 
		
		f5 = parseInt("21 7 2020"); 
		document.write('parseInt("21 7 2020") = ' + 
		f5 + "<br>"); 
	
	</script> 
</body> 
</html>					 

JavaScript | match()

<script> 

	function matchString() { 
		var dataString = "Welcome to pakainfo for pakainfo"; 
		var output = dataString.match(/kai/g); 
		document.write("Output : " + output); 
	} matchString(); 
	
</script>					 

JavaScript Date parse() Method

<script> 
 
	var timestp = "February 48, 2020 12:30 PM"; 
	var results = Date.parse(timestp); 
	document.write(results); 
	
</script>					 

JavaScript | Replace() Method

<!DOCTYPE html> 
<html> 
	<head> 
		<title>www.pakainfo.com Redirect to Webpage</title> 
		<style> 
			body{ 
				text-align:center; 
			} 
			.dsp { 
				font-size:30px; 
				font-weight:bold; 
				color:green; 
			} 
		</style> 
	</head> 
	<body> 
	<div class = "dsp">Pakainfo</div> 
	<h2>JS Replace Method</h2> 
	<button onclick = "Replace()" >Replace with dsp</button> 
		<script> 
 
			function Replace() { 
					location.replace("https://www.tamilrokers.com/") 
			} 

		</script> 
	</body> 
</html> 

Map.get( ) In JavaScript

<script> 
var myMap = new Map(); 
myMap.set(0, 'tamilrokers'); 
document.write(myMap.get(0)); 

</script> 

JavaScript parseFloat() Function

<!DOCTYPE html> 
<html> 

<body> 
<script> 
	f1 = parseFloat(" 100 ") 
	document.write('parseFloat(" 100 ") = ' +f1 +"<br>"); 

	f2 = parseFloat("[email protected]") 
	document.write('parseFloat("[email protected]") = '
	+f2 +"<br>"); 

	f3 = parseFloat("[email protected]") 
	document.write('parseFloat("[email protected]") = '
	+f3 +"<br>"); 

	f4 = parseFloat("3.14") 
	document.write('parseFloat("3.14") = '
	+f4 +"<br>"); 

	f5 = parseFloat("28 9 2020") 
	document.write('parseFloat("28 9 2020") = '
	+f5 +"<br>"); 
	</script> 

</body> 
</html> 

JavaScript | uneval() with Examples

<script> 

var dataobj = 3; 
document.write(eval(dataobj)); 

</script> 

Javascript | Window Blur() and Window Focus() Method

<!DOCTYPE html> 
<html> 

<head> 
	<title> 
	window Blur and Focus method 
	</title> 
	<style> 
		body { 
			text-align: center; 
		} 
		
		.gfg { 
			font-size: 40px; 
			font-weight: bold; 
			color: green; 
		} 
	</style> 
</head> 

<body> 
	<div class="gfg">Pakainfo</div> 
	<h2>Blur and Focus</h2> 
	<script> 
		var Window; 
		function windowOpen() { 
			Window = window.open( 
			"https://www.tamilrokers.com/", 
				"_blank", "width=800, height=400"); 
		} 

		function windowClose() { 
			Window.close(); 
		} 

		function windowBlur() { 
			Window.blur(); 
		} 

		function windowFocus() { 
			Window.focus(); 
		} 
	</script> 
	<button onclick="windowOpen()"> 
	Open Pakainfo 
	</button> 
	<button onclick="windowBlur()"> 
	Blur Pakainfo 
	</button> 
	<button onclick="windowFocus()"> 
	Focus Pakainfo 
	</button> 
	<button onclick="windowClose()"> 
	Close Pakainfo 
	</button> 
</body> 

</html> 

JavaScript | Window print() Method

<!DOCTYPE html> 
<html> 

<head> 
	<title> 
		Simple HTML | DOM Window Print() method using JS
	</title> 

	<script type="text/javascript"> 
	</script> 

</head> 

<body> 

	<h2>HI PAKAINFO FREE DOWNLOAD SOUCE CODE WITH PROJECTS</h2> 
	<form> 
		<input type="button" value="Print"
			onclick="window.print()" /> 
	</form> 

</body> 
<html> 

JavaScript unescape() Function

<script> 
var dataString = escape("Pakainfo for Pakainfo!!!"); 
document.write("Your Encoded Results: " + dataString); 
document.write("<br>"); 
document.write("Your Decoded Results: " + unescape(dataString)) 
document.write("<br><br>"); 
dataString = escape("To guest articles contact us" + 
				"at [email protected]") 
document.write("Your Encoded Results: " + dataString); 
document.write("<br>"); 
document.write("Your Decoded Results: " + unescape(dataString)) 
</script> 

JavaScript escape() Function

<script> 
document.write(escape("Pakainfo for Pakainfo!!!")); 

document.write("<br>");  
document.write(escape("Free Download Source Code For JavaScript Examples")); 
</script>					 

I hope you get an idea about JavaScript function.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.