Best of Modern JavaScript — Super Calls and Private Variables
Tags: javascript, webdev
Published: 2020-07-30 00:36:16

---
title: Best of Modern JavaScript — Super Calls and Private Variables
published: true
date: 2020-07-25 19:34:53 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8asuper-calls-and-private-variables/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258asuper-calls-and-private-variables
---

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at how to define classes with JavaScript.

### Superconstructor Calls

We’ve to call `super` before we call anything else.

For example, we can’t write:

```
class Foo {}

class Bar extends Foo {
  constructor(foo) {
    this.foo = foo;
    super();
    this.bar = bar;
  }
}

```

The first line must be the `super` call.

Instead, we write:

```
class Foo {}

class Bar extends Foo {
  constructor(foo) {
    super();
    this.foo = foo;
    this.bar = bar;
  }
}

```

Removing the `super` call also gives us an error. So we can’t write:

```
class Foo {}

class Bar extends Foo {
  constructor() {}
}

```

### Overriding the Result of a Constructor

We can override the result of a constructor by returning something we want in the `constructor` .

For example, we can write:

```
class Foo {
  constructor() {
    return {};
  }
}

```

Then when we log:

```
console.log(new Foo() instanceof Foo);

```

We get `false` returned.

It doesn’t matter whether `this` is initialized or not since we’re returning an object instead returning `this` implicitly in our constructor.

We don’t have to call `super` in the child constructor if we override the result as we did in the example.

### Default Constructors for Classes

We don’t need to specify an empty constructor if we don’t put anything in there.

So if we have:

```
`constructor()` `{}`

```

we can remove it.

For derived classes, we don’t need to add a constructor just to call the super constructor.

So we don’t have to write:

```
constructor(...args) {
  super(...args);
}

```

in our code.

### Subclassing Built-in Constructors

We can create subclasses of built-in constructors.

For example, we can write:

```
class SomeError extends Error {}
throw new SomeError('error');

```

We create a subclass of `Error` with the `extends` keyword.

Then we can throw it like any other `Error` instance.

We can also create subclasses of the `Array` constructor.

For example, we can write:

```
class Stack extends Array {
  get first() {
    return this[0];
  }
}

```

Then we can create a new `Stack` instance and use the available `Array` properties:

```
class Stack extends Array {
  get first() {
    return this[0];
  }
}

const stack = new Stack();
stack.push('foo');
stack.push('bar');
console.log(stack.first);
console.log(stack.length);

```

We called `pusg` to push entries to our `Stack` instance.

Then we get the `first` and `length` properties.

`first` is the getter we defined.

And `length` is inherited from `Array` .

### Private Data for Classes

JavaScript classes have no private members.

If we want private data, then we’ve to hide them somewhere else.

Or we can just create public members with a special naming scheme to indicate that they’re private.

We can just add an underscore before the property to indicate that they’re private.

For example, we can write;

```
class Foo {
  constructor() {
    this._count = 0;
  }
}

```

we add the `this._count` instance property to indicate that `count` is private.

We can also store private properties with weak maps and symbols.

For instance, we can write:

```
const _count = new WeakMap();

class Counter {
  constructor(count) {
    _count.set(this, count);
  }

  increment() {
    let count = _count.get(this);
    count++;
    _count.set(this, count);
  }
}

```

We create 2 weak maps and use `this` as the key for both weak maps.

The values are set to what we pass into the constructor.

Then we can get the value with the weak map’s `get` method.

And set the value with the `set` method.

Weak maps are useful since we can access the values with `this` , preventing the items inside from being accessed any other way.

### Conclusion

There are several things we’ve to look at when we call `super` .

Also, there are no easy ways to keep variables private.

The post [Best of Modern JavaScript — Super Calls and Private Variables](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8asuper-calls-and-private-variables/) appeared first on [The Web Dev](https://thewebdev.info).