Using classes

So far, we created objects using two mechanisms: the literal notation and the constructor. These mechanisms let us create objects with a simple approach, without too many formalities.

However, most developers are used to creating objects from the class construct. In fact, many Object-Oriented languages let the developer define classes and create objects as an instance of those classes.

The ECMAScript 2015 (also known as ECMAScript 6 or ES6) specifications introduce the class construct in JavaScript too. However, this construct has nothing to do with the classes of the traditional Object-Oriented Programming paradigm.

While in other languages, such as Java or C#, a class is an abstract description of the structure of an object, in JavaScript the class construct is just a syntactic simplification of the approaches to create objects we have already seen. The JavaScript class construct provides a much simpler and clearer syntax for managing constructors, prototypes, and inheritance.

The new class construct creates order among the different ways of object creation and aims to apply the best practice in prototype management.

Let's take a look at what a class looks like:

class Person { 
  constructor(name, surname) { 
    this.name = name; 
    this.surname = surname; 
  } 
} 

This class defines a constructor for objects of type Person. It is fully equivalent to the following old-style JavaScript code:

function Person(name, surname) { 
  "use strict"; 
  this.name = name; 
  this.surname = surname; 
} 

We can realize that classes are just syntactic sugar for the constructor's definition, simply getting the type of a class by means of the typeof statement:

console.log(typeof Person);   //function 

We can create an object using a class just as we do with constructors, as shown by the following example:

var person = new Person("John", "Smith"); 

However, unlike a constructor, we cannot invoke a class like a function, since the following code will raise an exception:

var person = Person("John", "Smith"); 

This ensures that we do not run the risk of the side effects that affect traditional constructors.

We can assign a class definition to a variable and then use the variable as an object constructor, as in the following example:

var Person = class { 
  constructor(name, surname) { 
    this.name = name; 
    this.surname = surname; 
  } 
}; 
 
var person = new Person("John", "Smith"); 

From a syntactic point of view, a class is a collection of methods included in braces and identified by a name.

One of these methods is the constructor() method, whose task is to define and initialize the properties:

class myClass { 
  constructor(value1, value2) { 
    this.property1 = value1; 
    this.property2 = value2; 
    this.property3 = ""; 
  } 
 
  method1() { 
    ... 
  } 
 
  method2() { 
    ... 
  } 
} 

The constructor of a class is a method with the reserved name constructor. You cannot have more than one constructor() method in a class.

The constructor method returns, by default, the new instance if it has no return statement, as a common JavaScript constructor. However, it is possible to override the default behavior by inserting a return statement in the constructor body. For example, the following code defines a constructor that returns a literal instance:

class myClass { 
  constructor(value) { 
    return { property1: value, property2: "" }; 
  } 
} 
 
var x = new myClass("foo"); 

All the methods defined in a class are attached to the prototype property of the class. The prototype property of a class is the prototype that the objects created using this class will have.

The choice to attach methods to the prototype of the class is the result of the application of a common best practice. Since usually methods are not dynamically changed, by attaching them to the prototype, this helps us to optimize memory management. In fact, if methods are not attached to the prototype, then they should be replicated on each newly created object with a proportional need of memory. Attaching methods to the prototype ensures that we have just one copy of them for all objects created from that class.

Unlike functions, classes are not hoisted. This means that while a function can be used before its declaration, a class cannot.

So, the following code will raise an exception:

var person = new Person(); 
 
class Person {...} 

The features of classes described so far are the basic ones. We will come back to explore other features of new class construct later in the book.