Simple steps on how to write a function in JavaScript

Nuelson Penuel Friday, May 12, 2023 Javascript


Table Of Contents
What is a JavaScript Function
Types of JavaScript Functions
Pre-defined Function
User-defined function
Syntax of creating JavaScript function

In this post, I am going to explain to you what is function, how to write a function in Javascript and types of function

What is a Function

Function in Javascript is a block of code that is made up of defined instructions to perform a specific task. 
When function is created, then all the codes within it won't be rewritten again because the function can be easily called upon over and over again to perform the task be defined for.

Types of Functions

Like every other programming languages, Javascript has two types of functions and they are

Pre-defined Functions
User-defined Functions

Pre-defined Function

Predefined function is an inbuilt function that can be used without a user creating it. For example alert(), parseInt() e.t.c

Example of a program that uses predefined function

function hello()
{
alert("Hello World"); //alert here is a predefined function
}



User-defined function

A user defined function is a function that is created by the user to be call at anytime required.

For you to create a function in JavaScript, you have to use the "function " keyword follow by the function name.

Syntax of creating function


 function x(parameters)  
{  
  //Codes to execute
}  

//Or function without parameters

function x()
{
//Codes to execute
}

In the above syntax, x is the function name. And it is not a must that Javascript function must have a parameters while declaring that is why I gave the second example.

We are going to write a program that will demonstrate the use of user defined function and predefined function in JavaScript.

The user defined function will solved for the sum of two numbers then output the result using predefined function.

Example

<html>  
<head>  
<title>Javascript Function Demostration</title>
<script>  
function sum(num1, num2) {  
var result = parseInt(num1) + parseInt(num2);
alert("Result: " + result);  
         }  
</script>  
  
</head>  
  
<body>  
<form>  
Enter num1 <br>
<input type="text" id="txtnum1" value=""/>
<br>
Enter num2 <br>
<input type="text" id="txtnum2" value=""/>
<br>
<input type = "button" onclick = "sum(document.getElementById('txtnum1').value, document.getElementById('txtnum2').value)" value = "Sum">  
</form>  
  
</body>  
</html>  


The above Function that we created is a parameterized function. num1 and num2 are written as parameters in the function.
The function name is "sum" and the result was displayed using predefined function known as alert().

The above program can also be rewritten without parameters and the output will still correlate with the parameterized function output.

Let us see example below

Example of non-parameterized function program
<html>  
<head>  
<title>Javascript Function Demostration</title>
<script>  
function sum() {  
var num1 = document.getElementById('txtnum1').value;
var num2 = document.getElementById('txtnum2').value
var result = parseInt(num1) + parseInt(num2);
alert("Result: " + result);
         }  
</script>  
  
</head>  
  
<body>  
<form>  
Enter num1 <br>
<input type="text" id="txtnum1" value=""/>
<br>
Enter num2 <br>
<input type="text" id="txtnum2" value=""/><br>
<input type = "button" onclick = "sum()" value = "Sum">  
</form>  
  
</body>  
</html>  


If you noticed, to call the function we make use of the button onclick event as onclick="sum()"

That is all. Thanks for reading.