classes

Up until ES6, JavaScript lacked the ability to create classes in the way that other languages offer. Sure you could create “classes,” but it always left a sour taste in our mouths. Talk about UGLY code. Although ES6 adds the keyword, “class”, they really are syntactic sugar around the old way of doing it in ES5. You’ll notice this trend around much of ES6 features–but I digress.

Why should I care?Classes promote structure and the new syntax covers up the yucky code behind the scenes. These new classes also promote the use of inheritance and building structured code.

Imagine a scenario, where you are creating a class to represent a user in your database.

ES5 “Classes”

1

2

3

4

5

6

7

8

9

10

11

functionUser(name,age){

this.name=name;

this.age=age;

}

User.prototype.greeting=function(){

console.log("Hi, my name is",this.name);

}

varmyUser=newUser('Tom',29);

myUser.greeting();

Eh it’s not really that bad, but it can be really confusing. Aren’t functions functions? How is it possible to create a new instance of a function? There is a lot you can do with building objects and inheritance, by ES5 just didn’t really expose it or make it meaningful enough for novice users to understand.

ES6 Classes

1

2

3

4

5

6

7

8

9

10

classUser{

constructor(name,age){

this.name=name;

this.age=age;

}

greeting(){

console.log("Hi, my name is",this.name);

}

}

Pretty cool, huh? This looks and feels like classes in other languages and comes more natural. You explicitly define a constructor, which is how you create an instance of a class. Then you can define members of the class as you see fit (notice you do NOT need the keyword function in front of them–pretty odd and inconsistent if you ask me).

ES6 Class Inheritance

Lets say your database has another type of user called an author. Authors are users but also have additional metadata. You can use class inheritance to model this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

classAuthorextendsUser{

constructor(name,age,books){

/* User keyword "super" to call

the parent constructor. This

will create this.name and this.age

on the instance of this Author class */

super(name,age);

this.books=books;

}

greeting(){

/* This method will automatically overwrite

the parent classes implementation. However

if we did not define it, the parent's

implementation would be used */

super.greeting();

console.log("But I'm also an author");

}

}

What did we learn here?

Use the keyword “extends” to write a class that inherits from another class.

The keyword “super” becomes available in the child class and can be used to call methods on the parent

You can override methods from the parent class simply by defining the method in the class. Notice there is no @override annotation or anything of the sorts required.

Classes in ES6 are important because they are explicit and help promote structured code. Many JS libraries have implemented their own version of classes, such as Dojo, TypeScript, and CoffeeScript, so it will be interesting to see if those get scaled back in the future as ES6 gets closer to fruition.

Chrome is behind on implementing classes in its spec, but you can try this out on the latest FireFox today. Enjoy!