Home / Must-know JavaScript / Functions in JavaScript

Functions in JavaScript

Must-know JavaScript

July 13, 2021 0

Last updated: September 18, 2021.

For beginners, writing functions in Javascript can seem intimidating. However, writing a function is just like writing any other code in Javascript. It is only that the code is wrapped in curly braces and called when needed, not automatically.

A special feature of functions that make them extremely powerful is that when we call a function, we can pass data into it. The function will then process this data in the way we specify. And we can call the function this way an infinite number of times!

This article covers how to write (i.e. declare/define) functions and also how to call them in your Javascript code.

What is a function?

A function executes some ordinary Javascript code. What it executes can be…well…any code you can write in Javascript! Writing this code to be executed is the first of two steps in working with functions: defining or declaring a function. But a declared function does not execute itself.

In a second step, a function must be called somewhere in your script. This can be before or after where the function is defined in your code. If a function is not called, the contents of its code is ignored.

How do we define a function?

Defining a Javascript function

Below is the syntax of a function:

function createAlert() {
  // When called, whatever code is here is executed
}

To define one, first you have to let Javascript know by writing function. Next, it needs a name. This can be almost anything (except reserved keywords), but it is good practice to name it something that describes its action. In this example, we are going to create an alert call inside the function. So we call it createAlert.

Following the name of the function, parantheses are added. Inside these, we can add parameters as a means to feed in data. It is empty for now but we will return to this again soon.

Finally, we open and close curly braces and add the code that defines the action of our function inside these. When we call our function, it will execute this code.

As mentioned, this function should call an alert so I add an alert call inside the function:

Running this code does nothing. We have defined what we want to do inside the function but we haven’t called it yet.

Calling a function

To call a function, we can include a function call either above or below the defined function. This will execute the contents of the function. We call a function by writing its name, followed by parantheses:

Running this code now executes the contents of the function.

Now, let’s say we want to run the function again, but this time display a different text. We could write several new functions with different text and call these. But this would involve copy and pasting the text many times, unnecessarily cluttering our code. And sometimes, we may want the text to be dynamic (e.g. display the name of the user after filling in a form).

We can achieve this by passing data into a function.

Passing data into functions with parameters

We can pass data into a function by including some text within the parantheses when a function is first defined (here textToDisplay). This is called a parameter. What we call it does not affect functionality in any way.

function createAlert(textToDisplay) {
  alert(textToDisplay)
}

Next, we can call the parameter inside the function, treating it like a variable. So what we do above is replace the hardcoded text with the parameter name.

Note that the function does not know what the contents of the parameter will be. We define this and pass it in as data at the moment of calling the function. We know that alert will display text so we will pass it in text. But know that if inappropriate data is passed in, Javascript will throw an error.

Calling a function with a single parameter

To pass in the data, we write what we would like to pass in inside the parantheses where the function is called. This could be a variable. But here we hard code some text:

function createAlert(alertText) {
  alert(alertText)
}

createAlert("Text from outside but displayed through the function")

Here we are doing much the same as above. But note that the text is ‘passed in’ and not defined within the function.

This may seem like reinventing the wheel. But what we have created is reusable functionality. For example, we can keep calling the function (of course, in practice, the different alerts would be called in response to different user actions).

We can also pass in dynamic text. For example, text retrieved from a database or, in the example below, text entered in a form: