Defining and using functions in JavaScript

Want to make your own functions in JavaScript? This tutorial explains how to define and call your own functions in JavaScript. It also explains how to use one or more parameters in your function. You can watch the video below or click here to view it on YouTube.

Functions allow you to write lines of code that can be used again and again in different parts of a program without actually having to write the lines of code several times. You can create a function that runs some lines of code (usually a specific set of instructions) and then ‘call’ that function to be used later on. Have a look at the sample code below.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions</title>
 <script type="text/javascript">
 
 // This is how you define a function
 function saymessage(){
 // function code goes here
 // more function code goes here
 // example of simple function code below:
 alert('Hello world');
 }
 
 // this is how you 'call' the function
 saymessage();
 
 //or you can call the function from an event like in a form, in the body section below
 </script>
 
</head>
<body>
 <form>
 <input type="button" value="click me" onclick="saymessage();"/>
 </form>
 
 
</body>
</html>

The sample code below shows how to make a function which uses a parameter.  A parameter is like a special variable which is used in a function to refer to a piece of data which is provided as input to the function. These pieces of data are also often called arguments.

The code below shows how to use just one argument. If you want to use more than one argument, scroll further down the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions with parameters</title>
 <script type="text/javascript">
 
 /* functions can also use one or more parameters
 a parameter is like a special variable which is used in a function to
 refer to a piece of data which is provided as input to the function. These pieces of
 data are also often called arguments.
 */
 
 // define the function and set the parameter eg. message
 function saymessage(message){
 // function code goes here
 alert(message);
 }
 
 // call the function to be used and provide "Hello world" as an argument to the function.
 saymessage("Hello there");
 </script>
 
</head>
<body>
 
</body>
</html>

This sample code below shows how to use multiple parameters.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Functions with multiple parameters</title>
 <script type="text/javascript">
 
 // define the function and set the parameters separated by comma
 function addNumbers(num1, num2){
 // function code goes here, eg:
 var answer = num1 + num2;
 document.write(answer + "<br/>");
 }
 
 // call the function three times with different parameters
 addNumbers(2,6);
 addNumbers(3,1);
 addNumbers(30,14);
 // notice that there is a <br/> tag in the function, so a new line will be added each time the function is called
 
 </script>
 
</head>
<body>
 
</body>
</html>

Next tutorial: Variable scope

Leave a Reply