An Introduction to ES6 Classes

While object oriented JavaScript has been around for years, the introduction of the ES6 class has added some syntactic sugar to the cumbersome Prototype strategy of generating ES5 classes with their own properties and methods.

In this tutorial, we give you an introduction to ES6 classes including defining class properties and methods, constructors, and what the ES6 class can and can't do.

JavaScript ES6 Classes

ES6 introduces the class keyword which provides syntactic sugar to prototyping in ES5. With the class keyword, classes can be defined without using function or ProtoType.

JavaScript Class Constructor

ES6 classes use the constructor method to initialize each new instance of the class. Below is an example of a basic Person class with a first and last property.

class Person{
    constructor(first,last){
        this.first = first;
        this.last = last;
    }
}

//create new Person instance
let person = new Person("Sam", "Erickson")

//access first attribute of person
console.log(person.first)

ES6 Class Properties

Notice how we've used the constructor function above to initialize our class. Our constructor function takes two arguments (first,last) which we assign to class properties for this.first and this.last.

Notice how after defining our Person class we initialize a new person variable with new Person() where we pass in our first and last name arguments. Finally we print the newly created person's first name property via person.first.

ES6 Class Methods

Like properties, we can also define methods for our Person class. Following our same example, we create a printName() method that prints the perons's full name.

class Person{
    constructor(first, last){
           this.first = first;
           this.last = last;
    }
    printName(){
           return this.first + " " + this.last;
    }
}

//create new Person instance
let person = new Person("Sam", "Erickson")

//print full name
console.log(person.printName())

In the above example, we've added the printName() function where we simply return the instance's first and last name properties. Notice how when we call the method on our Person instance, it returns "Sam Erickson".

ES6 Class Inheritance: Extending Classes

Inheritance is fundamental to object oriented programming. With inheritance, we can define sub classes that conform to a parent class with new functionality. Following our example, we can use extends to create a new sub-class FormalPerson:

class Person{
    constructor(first, last){
        this.first = first;
        this.last = last;
    }
}

class FormalPerson extends Person{
    printName(){
        return this.first + " " + this.last;
    }
}

//create new Person instance
let person = new Person("Sam", "Erickson")
let formalPerson = new FormalPerson("Jerry", "Smith")

//print full name
person.printName() //will error out

//print formalPerson full name
formalPerson.printName() //will return "Jerry Smith"

Notice how we've moved the printName() method to a new subclass FormalPerson. By using the extends keyword, we avoid having to define a constructor method for our FormalPerson class. Additionally, we can extend our FormalPerson class to include a method for printing the person's full name.

For these reasons, only instances of FormalPerson will be able to call the printName() method.

ES6 Class Private Method

Contrary to popular belief, ES6 classes DO NOT support private methods. While supersets like TypeScript further extend the ES6 class to accommodate public/private methods, it is not inherently supported with ES6.

Conclusion

ES6 classes are a more convenient way of practicing object oriented programming with JavaScript. While it's still possible to write class like objects with prototyping in ES5, ES6 provides a cleaner interface for defining and working with classes and objects in JavaScript.