OO keywords is probably the most awaited features in ES6. Classes are something like another syntactic sugar over the prototype-based OO pattern. We now have one, concise way to make class patterns easier to use.

Over the prototype-based OO pattern to ensure backwards compatibility.

Overview — an example of ES6 class syntax and ES5 equivalent

class Vehicle {



constructor (name, type) {

this.name = name;

this.type = type;

}



getName () {

return this.name;

}



getType () {

return this.type;

}



} let car = new Vehicle('Tesla', 'car');

console.log(car.getName()); // Tesla

console.log(car.getType()); // car

It’s naive example, but we can see a new keywords as class and constructor.

ES5 equivalent could be something like this:

function Vehicle (name, type) {

this.name = name;

this.type = type;

};



Vehicle.prototype.getName = function getName () {

return this.name;

};



Vehicle.prototype.getType = function getType () {

return this.type;

}; var car = new Vehicle('Tesla', 'car');

console.log(car.getName()); // Tesla

console.log(car.getType()); // car

Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

It’s simple. We instantiate our classes the same way, but let’s add some..

inheritance

..to it and start from ES5 example:

function Vehicle (name, type) {

this.name = name;

this.type = type;

};



Vehicle.prototype.getName = function getName () {

return this.name;

};



Vehicle.prototype.getType = function getType () {

return this.type;

}; function Car (name) {

Vehicle.call(this, name, ‘car’);

} Car.prototype = Object.create(Vehicle.prototype);

Car.prototype.constructor = Car;

Car.parent = Vehicle.prototype;

Car.prototype.getName = function () {

return 'It is a car: '+ this.name;

}; var car = new Car('Tesla');

console.log(car.getName()); // It is a car: Tesla

console.log(car.getType()); // car

And now look at the ES6 version:

class Vehicle {



constructor (name, type) {

this.name = name;

this.type = type;

}



getName () {

return this.name;

}



getType () {

return this.type;

}



} class Car extends Vehicle {



constructor (name) {

super(name, 'car');

}



getName () {

return 'It is a car: ' + super.getName();

}



} let car = new Car('Tesla');

console.log(car.getName()); // It is a car: Tesla

console.log(car.getType()); // car

We see how easy is to implement inheritance with ES6. It’s finally looking like in other OO programming languages. We use extends to inherit from another class and the super keyword to call the parent class (function). Moreover, getName() method was overridden in subclass Car.

super — previously to achieve such functionality in Javascript required the use of call or apply

static

class Vehicle {



constructor (name, type) {

this.name = name;

this.type = type;

}



getName () {

return this.name;

}



getType () {

return this.type;

}



static create (name, type) {

return new Vehicle(name, type);

}



} let car = Vehicle.create('Tesla', 'car');

console.log(car.getName()); // Tesla

console.log(car.getType()); // car

Classes gives us an opportunity to create static members. We don’t have to use the new keyword later to instantiate a class.

static methods (properties) are also inherited

and could be called by super

get / set

Other great things in upcoming ES6 are getters and setters for object properties. They allow us to run the code on the reading or writing of a property.

class Car {



constructor (name) {

this._name = name;

}



set name (name) {

this._name = name;

}



get name () {

return this._name;

}



} let car = new Car('Tesla');

console.log(car.name); // Tesla car.name = 'BMW';

console.log(car.name); // BMW

I use ‘_’ prefix to create a (tmp) field to store name property.

Enhanced Object Properties

The last thing I have to mention is property shorthand, computed property names and method properties.

ES6 gives us shorter syntax for common object property definition:

// ES6

let x = 1,

y = 2,

obj = { x, y }; console.log(obj); // Object { x: 1, y: 2 } // ES5

var x = 1,

y = 2,

obj = {

x: x,

y: y

}; console.log(obj); // Object { x: 1, y: 2 }

As you can see, this works because the property value has the same name as the property identifier.