If you want to code along, my favorite resource for testing ES6 is the Babel repl.

With the rise in popularity of transpilation & JavaScript frameworks using ES6, you will probably start running into code that looks like this:

class Person {



constructor(name){

this.firstName = name

} getName() {

return this.name

} }

To understand how all of this works, and to go into some more detail, let’s first look at the Constructor Pattern for creating JavaScript functions and prototypes.

Constructor Pattern and prototypes

This is a basic Constructor Pattern for creating JavaScript functions:

function FavoriteNFLTeam(team, location) {



this.team = team;

this.location = location;



this.getTeamInfo = function() {

return 'My favorite team is ' + this.team + 'located in ' + this.location

} }

Which you may also see written like this:

var FavoriteNFLTeam = function(team, location) {



this.team = team;

this.location = location;



this.getTeamInfo = function() {

return 'My favorite team is ' + this.team + 'located in ' + this.location

} }

This is a constructor function. The Constructor Pattern will allow us to create objects from functions. this will be bound to the object’s scope when we use the new keyword to create an instance of this object. We can also call methods on this.

When we instantiate the new keyword to create this object:

var myTeam = new FavoriteNFLTeam('Cowboys', 'Dallas')

This will implicitly insert a

return this

at the end of the function:

function FavoriteNFLTeam(team, location) {



this.team = team;

this.location = location;



this.getTeamInfo = function() {

return 'My favorite team is ' + this.team + 'located in ' + this.location

}



return this <- implicitly inserted when created with new }

The drawback to this is that every time we create a new instance of FavoriteNFLTeam, the

this.getTeamInfo()

function is recreated for every new object we create a copy of:

var myTeam = new FavoriteNFLTeam('Cowboys', 'Dallas') var yourTeam = new FavoriteNFLTeam('Dolphins', 'Miami') var theirTeam = new FavoriteNFLTeam('Patriots', 'New England')

To make this more efficient, we can use prototypes:

function FavoriteNFLTeam(team, location) {



this.team = team;

this.location = location; } FavoriteNFLTeam.prototype.getTeamInfo = function(){

return 'My favorite team is ' + this.team + 'located in ' + this.location

}

So now, when we create a new copy of FavoriteNFLTeam we are not creating a copy of the getTeamInfo function.

Now all of the instances of FavoriteNFLTeam have access to the getTeamInfo function, but do not have a copy of it.

Classes

Note, we will also be using es6 template strings for the following examples.

So the following:

var name = 'nader'

console.log('My name is ' + name)

Is the same as this:

var name = 'nader'

console.log(`My name is ${name}`)

Now, let’s recreate the previous function using a JavaScript class.

class FavoriteNFLTeam { constructor(team, location) {

this.team = team

this.location = location

}



getTeamInfo() {

return `My favorite team is ${this.team} located in ${this.location}`

} } let myTeam = new FavoriteNFLTeam('Cowboys', 'Dallas') console.log(myTeam.getTeamInfo()) // "My favorite team is Cowboys located in Dallas"

When creating a new class, you place any local variables you will need in the constructor.

Class Expressions

You can also create classes using Class expressions

var Name = class {



constructor(firstName, lastName) {

this.firstName = firstName

this.lastName = lastName

} sayName () {

console.log(`My name is ${this.firstName} ${this.lastName}`)

} } var me = new Name('nader', 'dabit')

me.sayName() // "My name is nader dabit"

Static and regular methods

The static keyword defines a static method for a class. Static methods are called without instantiating their class and are also not callable when the class is instantiated. Static methods are often used to create utility functions for an app

So you can call functions on classes themselves using the static keyword. For example:

class Name {



constructor(firstName, lastName) {

this.firstName = firstName

this.lastName = lastName

} sayName () {

console.log(`My name is ${this.firstName} ${this.lastName}`)

} static sayHello () {

console.log('Hello')

} } var me = new Name('Nader', 'Dabit')

So you can do this:

Name.sayHello() // "Hello"

And this:

me.sayName() // "My name is Nader Dabit"

But not either of these:

me.sayHello() <- // Error me.sayHello is not a function Name.sayName() <- // Error Name.sayName is not a function

Extending Classes

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

The super keyword is used to call functions on an object’s parent.

class Person {



constructor(name) {

this.name = name;

} getName(){

return this.name

}



sayName() {

console.log(`My name is ${this.name}`)

}

}



class Worker extends Person {



constructor(name, profession){

super(name)

this.profession = profession

} sayProfession() {

console.log(`${this.profession} is my profession.`)

}

}

The arguments get passed down in the same order as the Classes are constructed:

var Nader = new Worker('Nader', 'Programmer') Nader.sayProfession() // "Programmer is my profession" Nader.sayName() // "My name is Nader"

Now say you would like to access a function from the class that was extended. You can do so by using super.

There are two ways of using super: A class constructor (the pseudo-method constructor in a class literal) uses it like a function call (super(···)), in order to make a super-constructor call Method definitions (in object literals or classes, with or without static) use it like property references (super.prop) or method calls (super.method(···)), in order to refer to super-properties via 2ality.com

class Person {



constructor(name) {

this.name = name;

} getName(){

return this.name

}



}



class Worker extends Person {



constructor(name, profession){

super(name)

}



getName(){

console.log( `My name is ${super.getName()}`)

} }

Then, use it like so:

var Nader = new Worker('Nader')

Nader.getName() // "My name is Nader"

Of course, you can also call functions from within their own class by using this:

class Person {



constructor(name) {

this.name = name;

} getName(){

return this.name

}



} class Worker extends Person {



constructor(name, profession){

super(name)

this.profession = profession

}



getName(){

return super.getName()

}



sayAll() {

console.log(` ${this.profession} ${this.getName()}`)

} } var Nader = new Worker('nader', 'programmer')

Nader.sayAll() // "programmer nader"

Because we are using es6, we can also take advantage of Object Destructuring, so we do not absolutely have to reference this over and over:

class Name {



constructor(firstName, lastName) {

this.firstName = firstName

this.lastName = lastName

} sayName () {

let {firstName, lastName} = this

console.log(`My name is ${firstName} ${lastName}`)

} } var me = new Name('Nader', 'Dabit')

Thanks for your time. I hope you enjoyed reading this as much as I enjoyed writing it!