Methods and Functions

Use this article as a reference sheet for JavaScript methods and functions.

• Function — a set of instructions that perform a task.
• Method — a set of instructions that are associated with an object.

Functions

Functions are like recipes. They can execute a set of instructions on data or variables and return the result. The beauty of functions is that they are recyclable. That is, the function can be used repeatedly without having to write the same code again.

// Define a function that prints a string
function welcomeMessage() {
  console.log('Welcome to JavaScript');
}
// Call the function
welcomeMessage();

In the example above, the welcomeMessage function is used to display Welcome to JavaScript in the console. Let’s walk through this code step-by-step:

• The function keyword indicates the start of a function.
• The word that follows (welcomeMessage) is the function’s name.
• The empty parentheses after welcomeMessage indicate that there are no parameters, or inputs, for the function.
• The code between the opening ({) and closing (}) curly braces is a set of instructions. This code will only execute when the function is called.
• To call a method, you need the function’s name, a pair of parentheses, and a semicolon. In this example, the function is called with welcomeMessage();.

Let’s also consider a function that receives inputs and returns outputs:

function concatName(firstName, middleName, lastName) {
  return firstName + ' ' + middleName + ' ' + lastName;
}

Let’s walk through this example step-by-step:

1. The concatName function is created with three parameters (inputs): firstName, middleName, and lastName. Think of these as variables that have not been set yet.
2. Inside of the function, the return keyword will return the concatenation of firstName, middleName, and lastName, with spaces in between each. The return keyword terminates the function it is within, and returns a value — any code inside the function that comes after the return keyword will not be evaluated (nor executed, itself).
3. You can save the returned string to a variable or log it to the console when you call the function.

var concatGWC = concatName('George', 'Washington', 'Carver');

In the example above, the concatName function is called with the following arguments: 'George', 'Washington', and 'Carver'. These values are saved into the variables firstName, middleName, and lastName inside of the function. The function returns a concatenation of these three strings — the concatGWC variable stores the returned concatenated string.

In this reference sheet we have used the words parameters and arguments to reference similar, but distinctly different elements of a function and function call. What’s the difference between these words?

• Parameters are fields that serve as variable names inside of a function. In the example above, firstName, middleName, and lastName are parameters.
• Arguments are the values passed to the function when it is called. In the example above, 'George', 'Washington', and 'Carver' are arguments.

Methods

A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not. Let’s explore some of JavaScript’s built-in methods.

var str = 'CodeCADEMY';
var str1 = str.toLowerCase();
var str2 = str.toUpperCase();

The variable str in the example above stores the string ‘CodeCADEMY’. The .toLowerCase() and .toUpperCase() methods in the example above are called on str. Let’s talk through each line:

• On the second line, the .toLowerCase() method is called on the str variable, which returns the lowercase string 'codecademy'.
• On the third line, the .toUpperCase() method is called on the str variable, which returns the uppercase string 'CODECADEMY'. Notice, periods are used to call a method on an object, as in str.toLowerCase();.