Classes in JavaScript
Tags: coding, javascript
Published: 2017-10-02 16:42:12

---
title: Classes in JavaScript
published: true
description: 
tags: coding, javascript
---

When you started programming JavaScript years ago, you probably learned that it doesn't have __classes__, but __prototypes__! So you looked into your OOP courses from university and try to find something about this and the only thin your professor has to say about it is that nobody uses prototype based object orientation anyway and you are good to go with class based object orientation.

So, you learn that JavaScript is one of the most used programming languages on the planet and got your first job coding it, but now your knowledge is worth nothing?

Many years this was _kinda_ true.

But...!

With the release of ES6, aka ES2015, classes are part of JavaScript and don't need to mind the prototypes anymore.

__What does this mean?__

Well, classes in JavaScript are basically syntactic sugar for the whole prototype based OOP stuff and the first releases (like ES2015) only include the very basics. Some things you may know from class based languages won't work out of the box.

### So what works with ES2015?

```javascript
// You can create a class like this
class A {}

// But also like that
const A = class {};
let A = class {};

// It can even be anonymous if you export it from a module
export default class {}

// Your class can also have methods and static methods
class A {
  static doAnything() {
    console.log(this, "== undefined");
  }

  doSomething() {
    console.log("I'm doing something with ", this);
  }
}

// You can also use inheritance, with calls to the parent class
class B extends A {
  constructor() {
    super();
  }
}
```

This isn't much, but it gives you the basis of class based OOP and in the background it fiddles around with prototypes, so you don't have to worry.

### So, what do you want that may be missing?

__Class fields__ are a basic feature of many languages, but not _directly_ part of JS classes. So the following won't work with ES2015.


```javascript
class A {
  x: 10; // Error
}
```

You have to __define them inside__ the `constructor` on creation time.

```javascript
class A {
  constructor() {
    this.x = 10;
  }
}
```

There is a [proposal](https://github.com/tc39/proposal-class-fields) to add them in ES2018, they look a bit different tho.

```javascript
class A {
  x = 10;
}
```


__Bound methods__ are the default behaviour in many languages, but the methods of JS classes aren't bound by default. This means, when you pass around methods as callbacks, the object they correspond to can go missing.

```javascript
class A {
  constructor(x) { this.x = x; }
  publicMethod() { return this.x; }
}

const a = new A(10);
const callback = a.publicMethod;
callback(); // Error
```

This can be fixed by __manual binding__ a method to `this` in the constructor.

```javascript
class A {
  constructor(x) {
    this.x = x;
    this.publicMethod = this.publicMethod.bind(this);
  }
  publicMethod() { return this.x; }
}

const a = new A(10);
const callback = a.publicMethod;
callback(); // 10
```

In the future (ES2018) this can also be solved with __class fields__ and __arrow functions__.

```javascript
class A {
  constructor(x) { this.x = x; }

  // a class field that holds a method
  publicMethod = () => { return this.x; };
}

const a = new A(10);
const callback = a.publicMethod;
callback(); // 10
```

This works because __arrow functions__ capture the context (`this`) of their enclosing scope and inside the `{}` of a function definition the scope is the instances of the class.

### Conclusion

Class based programming gets more and more features every ECMAScript release so it's worth to build on that foundation if you don't like prototypes. 

Currently they aren't as complete as they could be, but there is enough to get started.