Table of Contents
Let's work through the creation of our first custom class, which we will call Salesperson. The class is designed to correspond to a specific salesperson that works for a company.
This class will accept two parameters: name, which is the name of the salesperson, and region, which holds the geographic region that this salesperson is responsible for.
Next, let's add our two parameters as arguments inside the round brackets:
Inside the function block, we now need to use the this keyword to assign the arguments that are passed into the round brackets to the new class instance that is being created.
Now every new instance of the Salesperson class will have two properties: name and region. The name property will be the first argument you pass into the Salesperson function, and the region property will be the second argument that you pass into the Salesperson function.
To found out our Salesperson class, let's create a method. The method will be called makeSales and will increase the value of an outside variable called sales, which is initialized at 0 (after all, a real-world salesperson does not yet have any sales on the day that they are hired).
First, let's create the sales property using the this keyword, and initalize this property with a value of 0:
Next, we will need to create the makeSales method.
Since a method is nothing but a function that lives inside of an object, the makeSale method will be created with the function keyword. It will take one argument newSale and add the value of newSales to the sales property of the Salesperson class.
Note that the method is an anonymous function that is assigned to this.makeSale, which is slightly different syntax than you would use when creating a function outside of a class.
Now that our class is done, let's create our first instance of this class.
In this case, here's how we could create an instance of Salesperson with a name of Nick and a region of Canada. The instance is assigned to a variable called me:
const me =newSalesperson('Nick','Canada');
Now that this done, we can reference instance's properties using the dot operator:
We can also use the makeSale method to increase the value of the sales property. Here is an example:
In the next section of this tutorial, you will learn a better way of creating class methods using a concept called prototypes.
A Better Way to Create Class Methods
The syntax that we used to create the makeSales method in the last example was perfectly functional, but it has an unintended downside. Namely, it creates a separate makeSales function for every instance of the Salesperson class.
To test that this is true, we can create two separate Salesperson instances and test whether their makeSales functions are equal to each other using the === operator:
joe.makeSale === dan.makeSale
Although both functions contain exactly the same syntax (and perform the same functionality), they are technically different (identical) objects. This does not really matter for small applications like the ones we are building in this course, but it can have serious performance implications when working on larger projects (think 100,000 class instances, not 2).
What is the solution?
Instead of putting the function inside the class, we can put it inside the prototype. This will allow all of the functions to share the same function, saving lots of memory across your application.
Specifically, let's build two arrays of numbers (named integers and decimals) and test the equality of their filter method using the === operator: