ECMAScript 6 - Keepin' it Classy

Apologies for the cheezy and very punny title, but I just couldn’t resist. One of the great things about ECMAScript 6 is how it handles classes. For those of you who don’t know, JavaScript is not so much an Object Oriented Language, but rather a prototype-based one. This makes it a bit difficult to implement objects. Despite this, many programmers have written, or have tried to write classes, but they usually come out a little ‘off.’ And when I say ‘a little off,’ I mean something like this:

"use strict";

function Book(title) {
 this.title = title; //Public property.
 var isCurrentlyReading = false; //Private property.

 this.start = function() { //Privileged method .
   this.isCurrentlyReading = true;
   return this.isCurrentlyReading;
 };

}

Book.prototype.stop = function stop() { //Define public method by prototype.
 this.isCurrentlyReading = false;
};

var theShining = new Book('The Shining'); //Instance of the object.

console.log(theShining.title); //Return "The Shining".

var result = theShining.start();

console.log(result); //Return true.

So what do we really have here? A class definition called Book, in which we’ll find everything we would expect to find in a class—we have properties and methods. We have pubic and private properties, public, private and even privileged methods (those that can access private variables and methods).

So what’s the problem? Well, it’s kind of a crummy way of doing things. Cummy to write, cummy to read. Luckily, it’s very easy to define classes in ECMAScript 6—and I mean, like, super easy. Have a look:

"use strict";
 
class Book {
 constructor(title) {
   this.title = title;
   this.isCurrentlyReading = false;
 }
 
 start() { //Public method.
   this.isCurrentlyReading = true;
   return this.isCurrentlyReading;
 }
 
 stop() { //Public property.
   this.isCurrentlyReading = false;
 }
}
 
var theShining = new Book('The Shining'); //Instance of the object.
 
console.log(theShining.title); //Return "The Shining".
 
var result = theShining.start();
 
console.log(result); //Return true.

I don’t think there’s much else to say. One of the big disadvantages though is the lack of private.

Inheritance is also possible with this syntax. It was still possible to use inheritance in the past, but it was so utterly horrible to do so that we almost never did in real-world applications. But with ECMAScript 6 you won’t have to exert yourself too much. Check out how nice this is:

"use strict";
 
class Book {
 constructor(title) {
   this.title = title;
   this.isCurrentlyReading = false;
 }
 
 start() { //Public method.
   this.isCurrentlyReading = true;
   return this.isCurrentlyReading;
 }
 
 stop() { //Public property.
   this.isCurrentlyReading = false;
 }
}
 
class HorrorBook extends Book {
 scream() { //Public method.
   this.scream = true;
   return this.scream;
 }
}
 
var theShining = new HorrorBook('The Shining'); //Instance of the object.
 
console.log(theShining.scream()); //Return true.
 
console.log(theShining.title); //Return "The Shining".

Just like in a real language, we can use super in order to call the parent methods. Here’s an example:

"use strict";
 
class Book {
 constructor(title) {
   this.title = title;
   this.isCurrentlyReading = false;
 }
 
 start() { //Public method.
   this.isCurrentlyReading = true;
   console.log('Start in base class.')
   return this.isCurrentlyReading;
 }
 
 stop() { //Public property.
   this.isCurrentlyReading = false;
 }
}
 
class HorrorBook extends Book {
 scream() { //Public method.
   this.scream = true;
   super.start(); //Will call to parent start.
   return this.scream;
 }
}
 
var theShining = new HorrorBook('The Shining'); //Instance of the object.
 
console.log(theShining.scream()); //Print start in base class and then true.
 
console.log(theShining.title); //Return "The Shining".

Additionally, we can declare static properties—that is, those properties that we use without an instance of the object (that’s the ‘new’):

"use strict";
 
class Book {
 constructor(title) {
   this.title = title;
   this.isCurrentlyReading = false;
 }
 
 start() { //Public method.
   this.isCurrentlyReading = true;
   console.log('Start in base class.')
   return this.isCurrentlyReading;
 }
 
 stop() { //Public property.
   this.isCurrentlyReading = false;
 }
 static throw() { //Static public method.
   console.log('Throw it!');
 }
}
 
Book.throw(); //Look ma! no instance.

Thought that was all? There’s also get and set for the class properties. These special methods allow us to make validation/changes with each variable assignment. Here’s an example:

// ES6 get and set
class Person {
   constructor(name) {
       this._name = name;
   }
   get name() {
       return this._name.toUpperCase();
   }
   set name(newName) {
       this._name = newName;   // Validation could be checked here such as only allowing non numerical values.
   }
   walk() {
       console.log(this._name + ' is walking.');
   }
}
        
let bob = new Person('Bob');
console.log(bob.name);  // Outputs 'BOB', because it is running throught get.

I know that was a lot of examples, but really, there’s nothing new here. Everything here was possible with the previous versions of ECMAScript, but with ECMAScript 6, is a lot more elegant and readable. There’s nothing here beyond rearrangement really. You don’t get any new abilities, but without a doubt it’s a lot more comfortable this way.  

In the next article, we take a look at how it works with the prototype chain behind the scenes. Though, this is not essential for preliminary studies.

About the author: Ran Bar-Zik is an experienced web developer whose personal blog, Internet Israel, features articles and guides on Node.js, MongoDB, Git, SASS, jQuery, HTML 5, MySQL, and more. Translation of the original article by Aaron Raizen.