How to Call a Function in JavaScript?

Functions are one of the main building blocks for JavaScript development.

In this article we are going to look at:

• How to call a function in JavaScript
• How to call a function from HTML
• How to call a function using the onclick event handler
• How to create a self-invoking function
• How to call an arrow function

There is a lot to cover!

This is a beginner tutorial. If you have a basic understanding of JavaScript and HTML then you will be able to follow along.

Grab a coffee, let's dive in!

How do you write a function in JavaScript?

Before we call the function we need to create it. There are many ways to do this in JavaScript but let us start with the simplest:

function sayHello(name) {
  alert('hello ' + name)
}

This is a simple function that will take a name argument and will show an alert box saying hello to that name.

To call that function we would write the code:

sayHello('steve')

This would cause an alert message to pop-up which would look like this:

This is all it takes to call a function in JavaScript. Ready to try this for yourself?

Calling your first JavaScript Function

We are going to use a site called Glitch to call your first function.

This site allows you to create a playground to run tests.

Head to the site to create a new project now then click the start coding button.

This will create a new project that looks like this:

To start editing the javascript click on the script.js file in the menu on the left.

Write the function that we created earlier:

function sayHello(name) {
  alert('hello ' + name)
}

How do you call a function in JavaScript? Using this code:

sayHello('steve')

Your file should now look like this:

To run the code click the show button in the top menu:

This will open up a new window with the web application inside and the alert should trigger.

Congratulations! You have called your first function.

Call a function from a link

Let's extend the example to show the alert when we click a link on the page.

At the moment the alert appears as soon as the page loads. Instead, we can show it when the user clicks a link.

To do this we need to use the onclick event handler.

Change the HTML so that it has this line:

<p>
  <a onclick="sayHello('steve')">Alert!</a>
</p>

Then remove this line from the JavaScript:

sayHello('steve')

Once you have done that go back to the HTML and you should see a page like this:

When you click on the “Alert!” link you will see the alert pop up.

One of the cool things about functions is that you can pass in parameters. We are already doing this in the example. We are passing in the name parameter into the sayHello function, like this:

function sayHello(name)

The function can then use this parameter when it runs the code. We have been passing my name as a parameter so far:

sayHello('steve')

So the value of name becomes “steve”.

Next, let's look at creating a text box so that you can type your own name.

Calling a Function with Parameters in JavaScript

The first thing we are going to add is the text box. To do this we need to change the HTML like this:

<p>
  <label>Name:</label>
  <input type="text" id="tb-name" />
</p>
<p>
  <a onclick="sayHello(document.getElementById('tb-name').value)">
    Alert!
  </a>
</p>

Let's break this down. The p tags are paragraph tags that you use to separate content in HTML. As we have two pairs of p tags here we have created two lines.

There are then two more tags in the first paragraph, label and input.

The label is for labeling form elements such as the text box we have added.

The input tag shows a text box on the screen so that the user can type something. Notice that we have given it an id of “tb-name”. This is so that we can reference it using JavaScript.

The second paragraph contains our link tag. This time inside the sayHello() call we have added some more code:

document.getElementById('tb-name').value

What we are doing here is getting a reference to the element on the page with ID “tb-name”. Once we have a reference we are then getting the value of the text box.

So here there are three parts:

1. We get a reference to the document, this is the webpage itself.
2. We then find the element with the ID “tb-name” by using getElementById('tb-name')
3. The last step is to get the value of the text box using .value

When you run the page you can enter your name in the text box and then click “Alert!".

The alert will then show like this:

How do I write a self-invoking function?

Self-invoking functions are a fancy name for functions that run as soon as the web page loads.

Going back to the original example we had this function:

function sayHello(name) {
  alert('hello ' + name)
}

We called it using this line of code:

sayHello('steve')

If we wanted the function to run as soon as the page loaded then we could combine the two parts like this:

function sayHello(name) {
  alert('hello ' + name)
}
sayHello('steve')

In the above code, we call the function as soon as the page loads by running sayHello().

When you give the function a name you are adding it to memory. By not giving the function a name and running the function immediately we can reduce the memory. Improving web page performance.

Let's look at an example of what I mean:

(function (name) {
  alert('hello ' + name)
}('steve'))

The code will alert immediately with hello steve as before.

This time we have not given it the name sayHello() it has no name, so it is not held in memory. Instead:

• Create a function
• Run the function immediately
• Destroy the function after use

There are times when this is useful such as for analytics where you want to track a page view.

Functions vs Arrow Functions

Before we finish this article I want to mention arrow functions. These are new functions that the major browsers now support.

Using the arrow function will reduce your code. Let's rewrite the sayHello function using arrow functions.

This is what the original function looked like:

function sayHello(name) {
  alert('hello ' + name)
}

And this is the same function written using arrow functions:

const sayHello = name => alert('hello ' + name)

Now, this can look a little strange at first. The key takeaway here is that arrow functions are starting to become the norm. You should be aware of them and how to use them.

Wrapping Up, How to Call a Function in JavaScript?

You have learned how to call a function in JavaScript using the code:

sayHello('steve')

We have looked at how you can create a function:

function sayHello(name) {
  alert('hello ' + name)
}

We then went a step further and integrated HTML with JavaScript. This meant we could call the function from a link on the page.

We then added a text box so that you could type your name into the box.

The last thing we looked at was arrow functions. You should start using these when writing JavaScript.

If you would like to look at the completed example then here is my completed Glitch.