JavaScript Basics: Learn How to Use Functions

Now that you’ve started learning JavaScript, it is time to learn how to use JavaScript functions. This is a fundamental topic that any good JavaScript bootcamp in San Francisco will cover at length. Before we dive in, we’ll define what a function is and go from there.

What Is a Function?

In general, a function is a subprogram that has been carefully chosen and designed to perform a certain task; it is an object. To execute a function, you will call it up, also known as invoking a function. You can also pass a value into the function to use within the function. In fact, functions will always return a value. So, if you do not specify a return value, the JavaScript function will come back undefined. 

What Is a JavaScript Function?

There are several ways that you can define a JavaScript function in your code. First, you will use a function declaration. You can create a function declaration by using the keyword “function” and then add the name of the function. When you are using a function declaration, you will hoist the function definition, which will allow you to use the function before defining it.

Next, you have a JavaScript function expression. This defines either an anonymous or a named JavaScript function. An anonymous function is one that has not yet been named. Because function expressions cannot be hoisted, you cannot use these before defining them. 

A shorter syntax for creating function expressions is an arrow function. This type of JavaScript function does not create its own value. It is only used to write different functions.

Parameters and Arguments

You might be fairly new to attending a JavaScript bootcamp. If this is the case, it’s possible that you have heard the terms “arguments” and “parameters” used interchangeably, which might lead you to think that they are the same thing. While these two terms are fairly similar when it comes to JavaScript functions, there are some very important distinctions that you should understand. You can learn more about these differences while attending a JavaScript bootcamp in San Francisco.

When you’re enrolled in a JavaScript bootcamp, you will learn that parameters are used to define a JavaScript function. This means that parameters are the names that are initially created when defining the JavaScript function. While making a function definition, you might pass as many as 255 JavaScript parameters. A parameter is separated from the next one using a comma. Here is an example that uses param2 and param1.

How to Invoke a Function

When you call the JavaScript function, you are executing the function, also known as invoking it. To invoke a function, first add the name of the JavaScript function followed by two parentheses. To help you better understand this component of your JavaScript bootcamp, let’s look at an example. 

If you are currently using Google Chrome, open the developer console. This will allow you to practice your JavaScript function. To open up this developer console, press Ctrl + Shift + J for Windows or Cmd + Opt + J for Mac.

To begin with, let us define a JavaScript function called logIt. This JavaScript function will have one parameter: “city.” After we execute this function, we then log the name into the console. It looks something like this:

If you wanted to invoke this function, you would call it and pass it in a single parameter. In this example, the JavaScript function is named Dallas. It would look something like this:

If you do not have any parameters for your function, you can use an empty set of parentheses to invoke it. It would look like this:

What Is a JavaScript Function Return?

In JavaScript, every function will return undefined unless you work to specify otherwise. Let’s look at another example by invoking an empty JavaScript function.

In the above example, the JavaScript function will return undefined. To customize what it will return, we can use the keyword “return” and then the value that we wish it to return. Take a look at this example:

In the example above, we have told the JavaScript function that we want it to return as false. Invoking this function allows this to happen. As you may learn in your JavaScript bootcamp, this is important because the value that is returned by the function will be returned to the function’s caller. Here is an example:

This expression will create a JavaScript function that will give a value that is double that of the num parameter. You can then invoke this JavaScript function and save the value that returns to a variable:

Logging out of this test value returns a result of nine. Another important rule when it comes to the return statement is that it will immediately stop the function. 

JavaScript Function Objects

A function is essentially a function object. A JavaScript bootcamp will often emphasize the fact that if something is not primitive, then it is an object. A JavaScript object is very versatile and has many uses; it can even allow us to move a function in JavaScript as a parameter to another JavaScript function.

When a JavaScript function accepts another parameter function, this is a higher-order function. Whether or not you are currently enrolled in a JavaScript bootcamp, you have most likely already used a higher-order function in JavaScript without realizing it. Two examples of this are Array.prototype.filter and Array.prototype.mapand. These are just a few of the many higher-order functions out there.

Closing Thoughts 

To summarize, a JavaScript function is an object. It is part of a subprogram whose goal is to complete one specific type of task. A JavaScript function is hoisted, while an expression is not. To execute a JavaScript function, you will call it, which is known as invoking a function. You can also pass a value into a function for the purpose of using it in the function, also known as a parameter, while the value of itself is an argument. A function will always return a value, but a function in JavaScript with no return value will come back as undefined.

This is a lot of information to think about at one time, and enrolling in a JavaScript bootcamp in San Francisco can help you better understand JavaScript functions. Whether you choose to attend a coding bootcamp or learn on your own, knowing more about this can help you do well as a web developer.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.