Introduction

The concept of Object Oriented Programming (OOP) dates all the way back to the pioneers of programming in the 1950's and 1960's. One of the most important aspects of OOP are classes, which basically allows you to group data and functionality into something that can be used as a blueprint for creating instances (objects) of this class.

JavaScript was created as a prototype-based programming language, which is sometimes referred to as "classless", and that was true for the several first specifications of the language. Classes were introduced to JavaScript with the ES6 specification from 2015 - before that, you had functions and objects, which could do pretty much the same as actual classes. With the addition of real classes to JavaScript, the language is now easier to understand for developers coming from other popular programming languages like C#, Java, C++ and many others.

What is a class?

If you're new to programming, all this talk about classes might seem very abstract to you, and I can definitely understand why. As mentioned, you can consider a class as a box of data and and functionality, often related to concepts in the real world. For instance, we may need to write code for dealing with the concept of a dog. We could create a class for representing a dog, with data about the dog (e.g. a name) and methods for interacting with the dog.

Defining a class

A class is defined by using the "class" keyword followed by the name of the class (e.g. Dog) and then the so-called body of the class. The class body contains the members of the class, which are essentially fields and methods. Let's try defining a Dog class:

class Dog
{
	name;
  
	Bark()
	{
		alert(this.name + " says: Woof!");
	}
}

Here we declare a class called "Dog", with a field (name) and a method (Bark). These members will allow us to store data about the dog (its name) as well as let the dog present itself with the Bark() method. But the class can't really do anything by itself at this point - we need to actually use the class.

Using a class

For now, let's try to create (commonly referred to as "instantiating") a dog object based on the Dog class and use it:

class Dog
{
	name;
  
	Bark()
	{
		alert(this.name + " says: Woof!");
	}
}

let dog = new Dog();
dog.name = "Lassie";
dog.Bark();

Notice the last three lines - here we create a Dog object by using the new keyword and the name of our class (Dog) and assign it to a variable called "dog". I then provide a name for the dog on the second line and then I call the Bark() method on the new object (dog.Bark()) on the third line, which presents the Dog to the world with the name and a "Woof!".

Now the cool thing is that because we have defined a blueprint for a dog, we can create as many dogs, based on this blueprint, as we want to:

let dog1 = new Dog();
dog1.name = "Lassie";
dog1.Bark();

let dog2 = new Dog();
dog2.name = "Pluto";
dog2.Bark();

let dog3 = new Dog();
dog3.name = "Scooby";
dog3.Bark();

Accessing class members

We already mentioned that a class consists of data and functionality, or more specifically, fields and methods. These are referred to as class members, and how you access them varies a bit depending on the situation. We're doing it quite a bit in the examples above, so please allow me to go a bit more into details about how I'm doing it.

When accessing a class member from within the class, the name of the member is prefixed with the keyword "this" followed by a period, e.g. this.name. The "this" keyword lets JavaScript know that you are referring to one of the members of the class and will allow you to differentiate between e.g. a parameter and a class field with the same name. Let me show you an example where we take advantage of this:

SetDogName(name)
{
	this.name = name;
}

This code is actually valid, because JavaScript will know that I'm referring to a member called "name" in the first part of the statement, while referring to the parameter of the same name in the last part of the statement (after the equal sign).

Now, when accessing a member from outside of the class, you can't use the "this" keyword. Here, the "this" keyword will instead be replaced by the name of the object you created, like dog1, dog2, and dog3 in the example above, followed by a period and the name of the member. An exception to this rule is static members - we'll get to them in a separate article.

We already saw an example of how to access class members from outside of the class in the previous example, where we called the Bark() method on the dog objects.

Classes vs. objects

If you have read this article after reading the chapter about objects, you may be a bit confused, because classes and objects really looks a lot like each other, and can be used to accomplish many of the same things. I have already touched on this several times, but I just want to emphasize it once more: Classes can be considered as templates for creating objects.

So, in other words, an object can be an instance of a class, and in most programming languages, that would be the only option, but in JavaScript, objects came before the introduction of classes and you can therefore instantiate an object on-the-fly, without it having any class as its template.

Summary

Classes can be considered as a box of data and and functionality, often related to concepts in the real world. In this article, I gave you a brief introduction to the concepts of classes, with an example of how a class can be defined and used. I showed a LOT of new concepts, but don't worry if you didn't understand them all, because we'll go into details about all of them in the following articles.