JavaScript Classes

What are they and why should you use them.

“Classroom” by eltpics is licensed under CC BY-NC 2.0

What are JS classes, how to create them, how to use them, and why you should use them.

JavaScript classes are a way to make a reusable object constructor.

Though not objects themselves, they are an alternative to using constructor functions such as this one:

function Person(first, last) {
this.firstName = first;
this.lastName = last;
}

Which is a typical way to make a reusable object constructor in JavaScript.

This will return an object that looks something like this:

{
firstName: first
lastName: last
}

Let’s assume we want to make a function that will greet this person by their first name. There are a few ways to do this:

  • We can create a lookup function which will look for and return the value that is assigned to firstName key then a second one to combine that into a string and return something like “Hello first”.
  • We can combine those two into 1 function and then add it as a method to the original constructor function.
  • We can combine the constructor and method into 1 block by refactoring the constructor function into a JS class.

We are going to go with option 3. That’s what this article is about after all.

How do we create a JavaScript class?

First we start with the class keyword and giving it a name.

class Person {}

The next step is making the constructor function.

class Person {
constructor() {}
}

Now we have the constructor function take in parameters and making keywords to pair the arguments with.

class Person {    constructor(first, last) {
this.firstName = first;
this.lastName = last;
}
}

This will output an object in the same structure as the constructor function provided earlier.

{
firstName: first
lastName: last
}

The constructor function will automatically called when new keyword is used on a class.

Now we can add any methods we want. We simply have to include them anywhere after the constructor block and they will be added to the prototype of every object that is created using this class.

This constructor is also added added to the prototype of every object created.

We can explore all of this later. First let’s add a method like the one we described earlier.

class Person {    constructor(first, last) {
this.firstName = first;
this.lastName = last;
}
greet() {
return `Hello ${this.firstName}`;
}
}

We can add as many methods as we like. Such as a greetLast which would greet someone using their last name.

How do we use them?

I gave that away 5 paragraphs ago. We use the new keyword and call on the class we just created.

const david = new Person('David', 'F');

Now we can see that we have a new object that looks like this:

Object created using the class provided earlier in this article.

We can see the constructor function as well as the greet function as a part of the prototype of this object. So what happens if we invoke the greet function (method)?

Calling the greet function (method) when creating the new object using the class provided earlier in this article.

We are being greeted!

We can also check to see that the class is a function and the returned object is an object.

Checking the typeof and instanceof the class and the returned object.

How are they useful?

(Conclusion)

  • Just like a constructor function they help you save time by allowing you to construct objects with the same structure over and over again without having to type all of the key-value pairs for each variable you intent to create using that same structure.
  • Easier to add all the necessary method in the same block as the class block. Instead of variable.prototype.methodName for each method.
  • Methods allow you to add functions to each object which saves time potentially building out a function for all the similar objects.
  • Makes debugging easier since the methods are in the class block. No more searching your code for the prototypes!
  • Inheritance can be useful and can save time if a second class you are making can use the same values as the ones before it.

Although I didn’t go over inheritance in this article it is worth a read. I may cover inheritance in a future article and will link it here if I do.

Software Engineering student at Operation Spark and WebDev hobbyist.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store