Functions

Coding with JavaScript

🕑 This lesson will take about 10 minutes

In this lesson, you will learn 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 just by calling its name, 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 (such as a string, integer, float or boolean)

  • Functions can perform an operation and not return a value

  • Functions can have parameters (require values passed into the function and used in the function)

  • Functions can also not have 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.

Sample code - function with no parameters or return statement

The example JavaScript code below shows how to make and call a function that has no parameters and does not return a value. In this example, the function is called as soon as the JavaScript code runs when the page loads. However, a function can be called using events or event listeners instead (such as a button click).

Note: You might need to open the codepen snippet in a new tab/window and click the Console button to view the output of the console.log() statement.

Sample code - function with a parameter

The sample code below shows how to make a function that uses one parameter.  A parameter is like a special variable that is used within a function to refer to a piece of data that is provided as input to the function. Parameters only exist within the function definition. Values that are provided for parameters are called arguments.

Note: You might need to open the codepen snippet in a new tab/window and click the Console button to view the output of the console.log() statement.

Sample code - function with multiple parameters

The sample code below shows how to specify and use multiple parameters for a function, with each parameter separated by commas.

Note: You might need to open the codepen snippet in a new tab/window and click the Console button to view the output of the console.log() statement.

Sample code - function with a return statement

In the sample code below, rather than the function displaying an alert message, it simply returns a value (a float 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. A function can only return once in a single function call.

Note: You might need to open the codepen snippet in a new tab/window and click the Console button to view the output of the console.log() statement.