ES6 Basics Part 4 – Classes

ES6 can be thought of as a new version of Javascript. Currently most JS is ES5.

Over the next few articles, I’m going to break down the new features & syntax of ES6 into bite-size chunks. Please note that some experience writing JS is required to make full uses of these articles.

This is part 4 of many so please keep checking back for the next article in the series.
Part 1 – const & let can be found here.
Part 2 – Template Strings can be found here.
Part 3 – Arrow Functions can be found here.

Anyone that has ever tried to write OOP JavaScript will know that the syntax is very verbose. It is not easy to understand. The example below shows a constructor function setting up a Person class. The person should have 2 properties & there is also a method which will print a short bio based on the properties.

function Person(characteristics) {
 this.name = characteristics.name;
 this.age = characteristics.age;
}

Person.prototype.bio = function() {
 return "Hi my name is " + this.name + ". I am " + this.age + " years old. Who are you?";
}

The code below shows a Person object being created & the method being used to return the short bio.

var person1 = new Person({name: 'Joe', age: 30});
person1.bio();

This will output “Hi my name is Joe. I am 30 years old. Who are you?”.

This code is not the easiest to explain – what is prototype? Why is the word class not mentioned anywhere like it is on other OOP based languages? The above example does not even go into inheritance (sub-classes) which is outside the scope of this article.

Thankfully ES6 classes make OOP JavaScript a lot simpler, as the example below shows.

class Person {
 constructor(characteristics) {
  this.name = characteristics.name;
  this.age = characteristics.age;
 }
 bio() {
  return `Hi my name is ${this.name}. I am ${this.age} years old. Who are you?`;
 }
}

The code above is creating the exact same Person class with the same properties and methods as the first example, but it is much easier to read & understand. Make note of the constructor function inside the class. This carries out the initialization & setup within the class – it is run anytime the new keyword is used to create a new instance of the class. There is also no need to separate the methods with a comma –  doing so will throw an error.

To create a new Person object & call the method the code is the same (using let instead of var keywords).

let person1 = new Person({name: 'Joe', age: 30});
person1.bio();

This will output “Hi  my name is Joe. I am 30 years old. Who are you?”. There is no reference to anything odd looking like a prototype keyword & the code is generally easier to understand.

I have  not included anything about sub-classes (inheritance) in this article – if you want me to do a more detailed article explaining this then please let me know in the comments.

 

Check back shortly for the part 5 – ES6 forEach array helper.

 

As not all browsers support ES6 code yet, Babel should be used to transpile (convert) the code into ES5 code.

Comments