JavaScript Functions: A Brief Overview
Defining and Calling Functions
This is a brief overview of JavaScript functions. I will discuss how functions are defined, as well as explain how functions are called in order to use them. Along with the provided examples, this will give you a better understanding of how to create and use functions in JavaScript.
Defining Functions
There are two ways of defining functions in JavaScript: function declarations and function expressions.
When you declare a function (called a function declaration), you use the function keyword, followed by the name of the function that you give it. Next, comes a list of parameters that the function needs to perform its task (a function can also have no parameters). These parameters are put inside of parentheses and are separated by commas if there are more than one parameter. If the function has no parameters, a set of empty parentheses is used. Finally, the tasks that you want the function to perform are written inside curly braces. A group of statements written inside curly braces (in this case, the tasks that you want the function to perform) is called a code block. In the following example, the function contains only one statement, which is alert("Hello!");. This is an example of a function declaration:
function greeting() {
alert("Hello!");
}In this simple example, the name of the function that follows the function keyword is greeting. Next, we have parentheses with nothing inside, meaning this function has no parameters. Finally, we have alert("Hello!"); inside the curly braces. This is the task that this function performs. In other words, when this function is called (more on this below), we will get an alert message saying, “Hello!”
In this first example, the function does not need any specific information to perform its task — it has no parameters. It just gives us an alert message. However, sometimes a function needs specific information to perform its task. In this case, we need to provide parameters when we declare the function. We give each parameter a name, and in a function, these parameters act like variables. Here is an example of a function with the parameter of name:
function greeting(name) {
return name;
}In this function declaration, we have a parameter of name. So, since the function has a parameter, this means that the function needs this information (name) to work. And the task that this function performs is return name;. In other words, the return statement stops the execution of this function and returns the value of name.
In this next example, the function has two parameters: name and adjective. This means that this function needs both of these parameters to work. And the task that this function performs is return name + " is " + adjective + ".";. In other words, it will return a string that includes the values of name and adjective.
function greeting(name, adjective) {
return name + " is " + adjective + ".";
}The second way to define a function is by using a function expression. In a function expression, the name of the function is usually omitted (a function with no name is called an anonymous function). In a function expression, the function is stored in a variable, after which, the variable can be used as a function. This is an example of a function expression:
var prices = function(item1, item2) {
return item1 + item2;
}Here, the function is stored in a variable called prices. This function also has two parameters that it needs to work: item1 and item2. And since this function does not have a name, it’s actually an anonymous function. However, when functions are stored in variables, as is the case here, they do not need to have names, because they are always called using the variable name. Finally, the task that this function performs is return item1 + item2;. So it stops the execution of this function and returns the value of item1 + item2.
Calling Functions
Now that we looked at the two different ways of creating functions, let’s look at how to actually call, or invoke, these functions. So far, we have seen different examples of functions above. But the way they are written above, they do not actually do anything, meaning that if we actually type the functions exactly as they are written into our text editor and try to run them, nothing will happen. In other words, by writing the following function, for example, we have merely defined the function:
function greeting() {
alert("Hello!");
}In order to actually use the function (i.e. execute all of the statements between the curly braces), we need to call, or invoke, it. And the way to call a function is to write the name of the function, followed by parentheses. Here, the name of the function is greeting, so the way to call this function is like this:
greeting();And that’s it. We have the name of the function (greeting), followed by parentheses. And with this line of code, we have called the function, meaning that the function will now perform its task, which in this case means that we will get an alert message saying “Hello!” Putting everything in context, our code looks like this:
function greeting() {
alert("Hello!");
}greeting();
Note that when the function is called here, it is written outside of the curly braces. Another thing to note is that you can call the same function as many times as you want. This means that you can execute the function more than once in your code, depending on your needs.
In the next example, our function has one parameter: name. To call a function that has parameters, we need to specify the values that it should use inside of the parentheses. These values are called arguments.
function greeting(name) {
return name;
}console.log(greeting("Mike"));
In this example, the value that is being specified is the string"Mike" (it is also possible to use a variable as an argument). So here, the function call looks like this: greeting("Mike");. In order to see the result in the console, we use console.log, and then put the function call inside console.log. When this code is run, the following will be logged to the console:
MikeTo call a function with two or more variables, we separate the arguments in the function call using a comma: greeting("Mike", "tall"));. And once again, we use console.log so we can see the result in the console:
function greeting(name, adjective) {
return name + " is " + adjective + ".";
}console.log(greeting("Mike", "tall"));
When this code is run, the following will be logged to the console:
Mike is tall.So, we have seen examples of how to call function declarations, whether they have no parameters, one parameter, or two or more parameters. Let’s now take a look at how to call function expressions. Remember that in a function expression, the function is stored in a variable. Remember too that in a function expression, the name of the function is usually omitted. So in order to call this type of function, we simply use the name of the variable.
var prices = function(item1, item2) {
return item1 + item2;
}console.log(prices(5, 10));
Here, the function is stored in the variable prices. So when we call this function, we call it using the variable prices. This function also has two parameters: item1 and item2. And inside the curly braces is what the function is tasked to do. It will return the sum of item1 and item2. So when we call the function, we need to specify the values of the arguments that should be used inside the parentheses (in this case, 5 and 10). So we call the function by writing prices(5, 10);. But once again, we want to see the result in the console, so we use console.log. And so the following is printed in the console:
15Another way of getting the same result would be to set the function call to a variable, and then to use that variable name inside of console.log to get the result.
var prices = function(item1, item2) {
return item1 + item2;
}var total = prices(5, 10);console.log(total);
Here, the function call (prices(5, 10)) is set to the variable total. When we do console.log(total), we get the same result in the console:
15Anonymous Functions
As noted above, an anonymous function is a function with no name. Since an anonymous function does not have a name, it cannot be called. An anonymous function is usually not accessible after its initial creation. As stated above, a function that is created as a function expression with no name (an anonymous function) is stored in a variable, and then that variable is used to call it. However, anonymous functions are often used as parameters of other functions, as the following example illustrates.
As explained above, we can use functions as often as we need to, simply by calling them anywhere in our code. As anonymous functions are usually not accessible after their initial creation, they are run immediately and are used for code that only needs to run once, most commonly in event handlers and listeners when an event occurs. Consider the following example.
document.getElementById('big-button').addEventListener('click', function() {
alert('Hello!');
}What happens here, is that when a button with the ID of big-button is clicked, an alert message saying “Hello!” appears in the browser. This happens because of the event listener that has been added here (click). The addEventLister() method can have up to three parameters (event, function, and useCapture). Here, the click event is passed in as the first parameter, and the anonymous function is passed in as the second argument — since this function has no name, it is an anonymous function. As soon as the button is clicked, the function is executed. As you can see, the task that this function performs is alert('Hello!'). Here, it is run immediately and is used only once here within this task. In other words, this function is executed only when this button is clicked.
Summary
This article looked at the two different ways that functions are defined in JavaScript (function declarations and function expressions), and looked at how to define functions that have no parameters, one parameter, or two or more parameters. Next, since merely defining a function does not actually execute the function, the section that followed explained how to call a function, so that the function actually runs and performs the task(s) specified within its code block. Lastly, anonymous functions were discussed.
There are still other areas that can be discussed regarding functions, such as scope, closures, hoisting, etc. But the focus here is merely to explain how functions are defined and called in JavaScript.
