Lesson

In this lesson, we'll learn about JavaScript methods. A method is a kind of function that is called on something. But what is a function? A function is just a bundle of code that performs a set of procedures. For instance, we could write a custom function to uppercase and reverse a string. We will learn how to write our own custom functions in a future lesson. For now, though, we'll use built-in JavaScript methods to do things for us.

By the way, if you're feeling confused about the distinction between methods and functions, don't worry. We will cover the difference more later in this lesson. In general, we're going to very briefly cover some concepts that are too advanced to cover in depth in this lesson. If you are confused about any of these concepts, just remember that we will be covering them in greater depth later - and that you don't need to know everything about how JavaScript works in order to use basic methods.

First, let's take a look at an example of a JavaScript method to uppercase a string.

"This is a string.".toUpperCase();

Try this out in Chrome's DevTools console. A quick refresher on how to access it: click on the three dots at the upper right corner of the browser screen, go to the More Tools menu, and click Developer Tools. Go to the Console tab on the window that pops up at the bottom of the screen. As a shortcut, you can also press Cmd + Option + J on a Mac or Ctrl + Shift + J on a PC.

If you're working remotely with others, use either JSFiddle or the Node REPL remotely.

Here's what happens in the console when we call this method:

> "This is a string.".toUpperCase();
"THIS IS A STRING."

String.prototype.toUpperCase() is a method that can be called on any JavaScript string. If you're wondering what prototype means, this is one of those complex concepts we are saving for later. For now, just be aware that the official JavaScript documentation that Mozilla provides uses this terminology. You can click on the link to the method above and see for yourself.

So here's the important distinction about methods. As we mentioned at the beginning of this lesson, methods are always called on something. The thing they are called on is known as the receiver. In contrast, functions don't necessarily have to be called on something. That's why a method is always a function but a function isn't necessarily a method. We will continue to discuss this distinction in future lessons.

So what do we mean by receiver? The receiver is the thing to the left of the method. In the example above, the receiver is "This is a string." The String.prototype.toUpperCase() is called on "This is a string."

Here's the syntax of a method:

// This isn't real code! It's just to show where the receiver is.

receiver.method();

As we can see, the receiver is on the left. The method that is called on it is on the right and always includes parentheses.

Both functions and methods can have arguments. Arguments are passed into the parentheses (). It's not required for a method to have arguments. Some take no arguments, some take optional arguments, and some take one or even many arguments.

String.prototype.toUpperCase() doesn't take any arguments. It just uppercases a string. So let's try out a built-in JavaScript method that does take arguments.

We can use String.prototype.concat() to concatenate strings. That's a fancy way of saying smooshing strings together. Let's look at an example in the console:

> "This is a string".concat("!!!");
"This is a string!!!"

In the example above, "This is a string" is the receiver, concat is the method, and "!!!" is the argument we pass into the method. As we can see, String.prototype.concat() takes the argument (in this case "!!!") and attaches it to the receiver ("This is a string!!!")

We can pass in as many additional arguments to this method as we want. For example, we can do the following:

> "This is a string".concat("!!!", "I like strings!");
"This is a string!!!I like strings!"

As this example shows, String.prototype.concat() can take multiple arguments. Be careful, though. If you want spaces, you'll need to account for that. The method won't add them automatically.

Now let's take a quick look at a function that isn't a method. In general, JavaScript provides built-in methods, not functions, so we have to write a custom function to demonstrate. Here's an example:

function addEmphasis(string) {
  return string.toUpperCase().concat("!!!");
}

The addEmphasis(string) function takes a string as an argument but has no receiver that it is called on. It will take string and then uppercase it and add three exclamation points. We will be writing custom functions soon so there is no need to worry about the parts of a function or the return keyword yet.

Before we continue, we've reached our first example where we don't add semicolons at the end of each line. Whenever we write a function starting with the function keyword, we do not need to end the function with semicolon.

Also, often we'll have code that spans multiple lines. We should still have semicolons at the end of each statement (for instance, the line beginning with return above is a statement). This will become clearer with practice and more examples.

Now let's take a look at how we'd call this function. Copy the three lines of code above and paste them in the console. Then call the function like this:

> addEmphasis("hi");
"HI!!!"

As you can see, there's no receiver. Instead, there's just an argument. What would happen if we tried to call this function on a receiver?

> "hi".addEmphasis();

We'll get the following error:

"hi".addEmphasis is not a function

How can this be the case?

Well, addEmphasis("hi") and "hi".addEmphasis() are two different functions. The former is a function that isn't called on anything. The latter is a type of function known as a method that is called on something - in this case, a string.

Throughout this course, we will mostly be working with methods. However, we will be writing custom functions very soon (later in this section). For now, we will just be working with built-in JavaScript methods - but we will learn how to write custom methods in Object-Oriented JavaScript.

We can also call methods on variables - or pass variables into arguments.

For instance, try this in the console:

> let stringVariable = "hi!";
stringVariable.toUpperCase();
"HI!"

As we can see, we can call a method on a receiver that contains a variable.

Now let's look at an example with an argument. We'll use our custom function from above. Note: If you have already declared the addEmphasis() function and the stringVariable variable in the console, you don't need to type them in again.

function addEmphasis(string) {
  return string.toUpperCase().concat("!!!");
}
let stringVariable = "hi!";
addEmphasis(stringVariable);

In function addEmphasis(string), string is a parameter. That means it's a placeholder for a variable. It has no value yet. Once we pass an argument into the parameter, the parameter takes on the value of the argument. If, for some reason, we forget to pass an argument into a parameter, that parameter's value will be undefined. (By the way, make sure you note where we've placed semicolons - and also where we haven't - they aren't included at the end of the first and last lines of our function.)

What can make this especially confusing for beginners is when a variable has the same name as a parameter. We can do the following:

function addEmphasis(string) {
  return string.toUpperCase().concat("!!!");
}
let string = "hi!";
addEmphasis(string);

Note that the parameter in function addEmphasis(string) has the same name as the variable let string = "hi!";.

When we actually call addEmphasis(string), we are passing in the string variable as an argument. So string here is an argument - not the parameter we initially defined when we declared the function.

This is why we suggest making variable names different from parameter names. The distinction between parameters and arguments is clearer - and less confusing - if you do.

It is completely expected that the difference between parameters and arguments will be at least a little confusing at first. Just keep reminding yourself of the distinction:

  • A parameter is a placeholder for an argument. We use parameters when we declare functions and methods. We'll learn more about declaring functions when we actually start creating our own custom functions soon.

  • An argument is the value that is passed into a parameter. Since we'll be working with variables a lot, we'll often pass variables into parameters as arguments. We can also pass other data types into parameters as well, but it's much more common to pass in variables.

Once again, keep your variable names distinct from your parameter names to avoid confusion! Otherwise, it's easy to start thinking variables passed into parameters as arguments are the same thing as parameters. But they're not.

In this lesson, we've covered the distinction between methods and functions. A method is a kind of function that is called on something. A function is just a set of operations that isn't necessarily a method.

We've also learned about the difference between parameters and arguments. Once again, parameters are placeholders for arguments. Because an argument is passed into a parameter, it can be tempting to think arguments and parameters are interchangeable when they are not.

We will be working with these concepts every day at Epicodus - so even if they are not fully clear yet, they will be soon.

Terminology


  • Method: A method is an action run on a piece of data; you can think of it as a message you send to a piece of data, and the result is the response.

  • Return value: The return value is the method's response.

  • Argument: Some methods take one or more arguments that provide the method with additional information to help it perform its action.

Lesson 11 of 59
Last updated October 12, 2021