Quickview: A quick es6 Classes Overview

I keep meaning to put together quickviews of languages I use, almost like cheatsheets, but like a pocket guide overview of language syntax and uses. I recently brushed up on es6 classes.

So here’s my first attempt at a quickview: es6 classes

Basics

Constructors

1
2
3
4
5

class NameOfClass {
constructor(args) {
...
}
}

Setting class level variables:

Adding parameters to this

1
2
3
4
5

class NameOfClass {
constructor(name) {
this.name = name;
}
}

Methods

Add a method to an es6 class

1
2
3
4
5
6
7
8
9

class NameOfClass {
constructor(name) {
this.name = name;
}

methodName() {
return "Hi " + this.name + "!"
}
}

Default values for arguments

Set a default value for an argument in an es6 class

1
2
3
4
5

...
constructor(name = "Default") {
this.name = name;
}
...

Interpolation

Template strings and interpolating variables (injecting a variable):

You use ${…} and backtick syntax `..`

1
2
3
4
5
6
7
8
9

class NameOfClass {
constructor(name) {
this.name = name;
}

methodName() {
return `Hi ${ this.name } !`
}
}

Note: You can put any kind of valid javascript in the interpolation, including methods.

Advanced

Extending

Extend one class with another class in es6 classes.

1
2
3

class OtherClass extends NameOfClass {
...
}

Call parent class

Referencing the parent class constructor with super(…);

1
2
3
4
5
6

class OtherClass extends NameOfClass {
constructor(originalClassArg, newClassArg) {
super(originalClassArg); // You are calling the original class' constructor
this.newClassArg = newClassArg;
}
}

Overriding

Extending a parent class method without overriding it:

1
2
3
4
5
6
7
8
9
10
11
12

class OtherClass extends NameOfClass {
constructor(originalClassArg, newClassArg) {
super(originalClassArg);
this.newClassArg = newClassArg;
}
methodName() {
let methodValue = super.methodName();
...
// more logic, do something with methodValue perhaps
..
}
}

References:

Recommended Course:

https://completereactcourse.com

Quickview: A quick es6 Classes Overview

Basics

Constructors

Setting class level variables:

Methods

Default values for arguments

Interpolation

Advanced

Extending

Call parent class

Overriding

References:

Recommended Course:

Read more on template strings:

Leave a Reply Cancel reply