JavaScript Classes: The Basics

JavaScript classes are a type of function that are declared using the Class keyword. Classes can have instances, which is the ability to create copies of itself and each class can contain unique properties, often set when the instance is created. Though we can use the new function to create many objects, class gives great features which are useful for object-oriented programming.

Syntax ✍🏼

The basic syntax of a class is:

class ExampleClass {
  constructor () { }
  method() { }
  another method() { }
  ...
}

The constructor is where unique properties would be defined for the class and are created with each new instance. We can then use new ExampleClass() to create a new object along with its methods.

So, for example:

class ExampleClass { 
  constructor(title) { 
    this.title = title; 
  }   yourTitle() { 
    alert(this.title);
  } 
} let example = new Example(“First”); example.yourTitle();

Hold on. Let us first uncover what a class really is!

What class ExampleClass {...} is really doing, is creating a function called ExampleClass and stores any class methods in ExampleClass.prototype. So when we call the yourTitle() method, it is taken from the prototype.

Let’s take a step back to talk about what prototype is in JavaScript.
JavaScript objects can have aprototype object in which it inherits methods and properties from.

So what is happening in the code above? Let’s break it down:

• class ExampleClass is a function (the class keyword is more of syntactic sugar and you will see why on the next line as to what ExampleClass really is).
• ExampleClass is, more precisely, the constructor method(ExampleClass === ExampleClass.prototype.constructor // true).
• The methods of the class are in ExampleClass.prototype

Static Methods ⌛

Speaking of methods, we have access to static methods within classes. These methods cannot be called on instances of the class but they’re meant for being called on the class itself. Why are they used? They’re often used as functions to create or clone objects.

Inheritance: Class vs Prototypal ⚔️

Classes inherit from classes and therefore create subclass relationships. What this means is that class inheritance uses the prototype chain to connect the child Constructor.prototype to the parent Constructor.prototype. Whereas for prototypal inheritance, objects inherit from objects. This allows for easy selective inheritance as instances can be created from different source objects. Thus prototypal inheritance is best to use as class inheritance can become very complicated and abstract, the more the classes that are involved.

Take a look at this table with key aspects of both:

Source: dev.to

This 👈🏼

JavaScript has a dynamic this. This means it is dependant on the context in which it is called. Something to note is that if an object method is passed around and called in another context, this won’t be a reference to its object any longer.

Outside of any function, this refers to the global object and inside a function, the value of this depends on how the function is called.

Since classes and functions are basically the same things, the behaviour of this is similar in both.

In terms of a class constructor though, this refers to a regular object.

So yes, classes are known as ‘syntactic sugar’ but are great for OO-programming. They are a great template for creating objects and holding data with code to work on that data.

I hope this gives you an insight into JavaScript classes and that you are able to use them with ease when working with them!

More content at plainenglish.io