Defining and using functions in JavaScript

This tutorial explains how to define and call your own functions in JavaScript. In programming, a function is a section of code in a program that is given a name and performs a specific task. A function can be re-used in a program many times and saves us having to re-write the code over and over again whenever we want the program to perform that task. All we have to do is ‘call’ the function by its name when we want to use it.

Functions can be created in a few different ways:

  • Functions can perform an operation and return a value
  • Functions can perform an operation but not return a value
  • Functions can take parameters (values that are used in the function)
  • Functions can also not require parameters

We will look at how to create and use functions in these different ways. Watch the video below and then scroll down for the sample code.

Here is the HTML code that references a script.js file containing JavaScript code:

<html>
    <head>
        <title>Functions</title>
        <script src="script.js"></script>
    </head>

    <body>

    </body>
</html>

The example JavaScript code below shows how to make and call a function that has no parameters and does not return a value.

// This is an example of defining a function
// with no parameters specified and no return value
function sayMessage(){
    alert("Hello world");
}

// This is an example of calling a function
sayMessage();

The sample code below shows how to make a function which uses one 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. Parameters only exist within the function definition. Values that are provided for parameters are called arguments.

// This function has one parameter (message)
function sayMessage(message){
    alert(message);
}

// An argument ("Hello") is provided for the message parameter
sayMessage("Hello");

This sample code below shows how to use multiple parameters.

// This function has three parameters (separated by commmas)
function average(num1, num2, num3){
    var result = (num1 + num2 + num3) / 3;
    alert(result);
}

// Three arguments are provided for the parameters
average(10, 15, 12);

In the sample code below, rather than the function displaying an alert message, it simply returns a value (called result in this example). The returned value can be used any way you like when you call the function in your code. For example, you may want to store the returned value in a variable for use later, or display it on screen, use it in another operation, or even pass it into another function as an argument for a parameter.

// This function has three parameters
function average(num1, num2, num3){
    var result = (num1 + num2 + num3) / 3;
    // The function returns a value
    return result;
}

// The returned value from the function can then be used
// eg. it can be stored in a variable or displayed or used in another operation 
var myAverage = average(10, 15, 12);
alert(myAverage);

Next tutorial: Calling functions from events

Leave a Reply