JavaScript Functions

A function is a self-contained piece of code that returns a value. You can use JavaScript's built-in functions, or create your own.

A function (also known as a method) is a self-contained piece of code that performs a particular "function", then returns a value. You can recognise a function by its format — it's a piece of descriptive text, followed by open and close brackets.

Like this:

The code that goes into a function can be as simple or as complex as you need it to be.

Regardless of the code's complexity inside the function, when you call the function, you don't need to know anything about the code inside. All you need to know is the name of the function, and any arguments that you might need to supply.

For example, take JavaScript's built-in alert() function. You can call that function from within your code without knowing how the function is written. All you need to know is what the function does and how to call it.

Parameters & Arguments

Sometimes there will be text in between the brackets of a function's definition. This text is known as a parameter. A parameter specifies that a value should be provided to the function. For example, a parameter might be called FirstName, which indicates that the caller should provide the value of the first name to the function (i.e. the first name of whoever the end user is).

So we could modify the above example to include a parameter:

An argument refers to the actual value passed to the function at runtime. This info could be different depending on the context in which the function is being called. For example, Homer could be passed as an argument to a function that has a FirstName parameter.

Parameters can be very handy, such as allowing your users to provide information (say via a form) that is passed to a function to process. For example, your users could enter their name into a form, and the function would take that name, do some processing, then present them with a personalised message that includes their name.

A function doesn't actually do anything until it is called. Once it is called, it takes any arguments, then performs it's function (whatever that may be).

So we could call the above function like this:

Writing a function in JavaScript

Here's an example of a JavaScript function.

  1. Write the function

    The first thing you need to do is write the function:

  2. Call the function

    Once you have written your function, you can call that function from within your HTML code. Here, when the user clicks the button, it runs the function. In this case, we use the onclick event handler to call the function.

So both combined should work like this:

Explanation of code

The Function

  1. We started by using the function keyword.

    This tells the browser that a function is about to be defined.

  2. Then we gave the function a name, so we made up our own name called displayMessage.

    We specified the name of an argument (firstName) that will be passed in to this function.

  3. After the function name came a curly bracket {.

    This opens the function. There is also a closing bracket later, to close the function.

  4. In between the curly brackets we write all our code for the function.

    In this case, we use JavaScript's built in alert() function to pop up a message for the user.

Calling the Function

  1. We created an HTML form with an input field and submit button.

  2. We assigned a name (yourName) to the input field.

  3. We added the onclick event handler to the button.

    This event handler is called when the user clicks on the button (more about event handlers later). This is where we call our JavaScript function from. We pass it the value from the form's input field. We can reference this value by using form.yourName.value.