image copyright Kinchloe photography: http://flic.kr/p/pFw3r6

ECMAScript 6 in depth — classes

ECMAScript 6 brings a notion of classes. Despite the name, the new classes in JavaScript are not classes at all. This blog post is an attempt to demystify common misconceptions.

What is a class

In classical languages, objects are created from a blueprint. That blueprint is called a “class”. Class describes which methods and attributes should an instance of an object have, their visibility (private, public) and some other properties. When an instance of an object is created from a description of a class (the blueprint) all methods and attributes are copied into the resulting instance of an object. The only exception are static attributes and methods.

In JavaScript, when the new keyword is used nothing gets copied. Instead, the newly created object gets a reference to the function’s prototype. All values present in the prototype are not copied, they’re merely referenced. This means that all object instances constructed from the same function using new keyword will share the same prototype. If at some point one object will alter the prototype all other object instances will also see that change.

In JavaScript all values present in the object prototype are not copied,
they are merely referenced.

What is a class in ECMAScript 6

The new class in ECMAScript 6 specification is a syntactic sugar for working with prototypes. It doesn’t add any new features, it merely allows the easier way of using what is already available in the language.

Let’s have a look at a few examples:

function Location(lat, long) {
this.lat = lat;
this.long = long;
}
Location.prototype.geolocation = function() {
return google.whereami(this.lat, this.long);
}
// static function. Doesn’t depend on instance’s state
Location.distance_between(first, second) {
return google.distance(first.lat, first.long, second.lat, second.long);
}

The same written using class notation:

class Location {
constructor (lat, long) {
this.lat = lat;
this.long = long;
}

geolocation() {
return google.whereami(this.lat, this.long);
}
    // static function. Doesn’t depend on instance’s state
static distance_between(first, second) {
return google.distance(first.lat, first.long, second.lat, second.long);
}
}

Under the hood JavaScript runtime produces exactly the same functions. Their prototypes look the same and the static function is added directly to the Location function.

The instance of a class is created using the constructor call with new keyword, just like before:

var here = {lat: 52.529507, long: 13.401894};
var oberholz = new Location(here.lat, here.long);
oberholz.geolocation();
var road_home = Location.distance_between(oberholz, home);

At the end, it is just plain old functions and prototypes.

But…why???

Language evolution

Classes provide a higher-level way to work with functions and objects. They simplify operations for rewiring the prototype chains.

Classes are fully backwards-compatible. In fact, you can mix classes and prototype chain manipulation operations as you please.

Tooling

Usage of the class keyword helps static analysis tools to make more sense out of our code.

Making it easier for the new developers to join

This is probably the biggest reason. The popularity of JavaScript is surging in recent years. More and more developers are switching to JavaScript. The notion of classes should help them get up to speed with JavaScript and start hacking away.

Developers still need to remember that classes in JavaScript are not the same as they are in C++ or Java.

They will still need learn about prototypes and constructor calls at some point. It just doesn’t need to happen on their very first day.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.