Tag: es6

Pseudoclassical Instantiation in ES2015

Last month I posted about the various instantiation styles in ES5.  This month let’s take a look at how to instantiate in ES2015 aka ES6!

First let’s review how we instantiate in ES5.

ES5 Superclass

We are making a class called Furniture. It takes in arguments h, w, and d, which become equal to this.height, this.width, and this.depth, respectively.  Furniture also has the property this.material, which is preset to ‘wood’. Lastly, we gave Furniture a method called calcSqFootage. When called, it returns the product of this.height, this.width, and this.depth.

var Furniture = function(h, w, d) {
  this.height = h;
  this.width = w;
  this.depth = d;
  this.material = 'wood';
};

Furniture.prototype.calcSqFootage = function(){
  return this.height * this.width * this.depth;
};

ES5 Subclass

Next we make a subclass of Furniture. It is called Table, and its parameters are h, w, and d. If the superclass requires these parameters, the subclasses require them too.

Next we must connect Table to Furniture. We do this by using the .call() method.  We want to call the class Furniture and give it the context of this subclass as well as pass the parameters.

Now the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

In the last two lines below, we need to connect the subclass’ prototype property to the superclass’ prototype, so that the methods can be inherited. So we create a new object with Object.create() and re-assign Table.prototype. Object.create() creates a new object with an inheritance chain.

Lastly since we re-assigned the value of Table.prototype, we lost the constructor property of Table.prototype. We need to add it back, so that we will be able to use it in the case we want to figure out which function created a certain instance object.

var Table = function(h, w, d) {
  Furniture.call(this, h, w, d);
  this.finish = 'Espresso';
  this.distressing = false;
};
Table.prototype = Object.create(Furniture.prototype);
Table.prototype.constructor = Table;

We instantiate in ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

Now let’s turn the above into ES6!

 

ES2015/ES6 Superclass

Even though the below code looks different, it functions the same as the code above.

We pass in the arguments h, w, and d to the constructor. (Note the constructor here is different than the constructor property! The constructor here is a method for creating and initializing an object created within a class). The parameters give values to this.height, this.width, and this.depth respectively. We still have the property this.material equal to ‘wood’.

Lastly we have the calcSqFootage method inside the class block.

class Furniture {
  constructor (h, w, d) {
    this.height = h
    this.width = w
    this.depth = d
    this.material = 'wood'
  }
  calcSqFootage() {
    return this.height * this.width * this.depth;
  }
};

 

ES2015/ES6 Subclass

With a subclass, we must do two things to show it is a subclass. The first thing is to declare that it is a subclass by using the extends keyword. We say that the subclass extends the superclass.

The constructor will take in the same arguments (h, w, and d). The next new part is that we call super(). This is about equivalent to the Furniture.call(this, h, w, d) in ES5.

Like in ES5, the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

With the ES6 syntax, we do not need to use Object.create() or set the constructor for Table.prototype and Table.prototype.constructor. The syntax does it all for us.

class Table extends Furniture {
  constructor (h, w, d) {
    super(h, w, d);  
    this.finish = 'Espresso'
    this.distressing = false
  }
};

We instantiate in ES6 similar to ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

 

In this post, we have reviewed the ES5 pseudoclassical instantiation style of a class and its subclass. Then we contrasted it with the ES2015/ES6 syntax. The ES6 syntax is different, but its underlying functionality is the same as ES5.

How to Install Sublime Packages in 30 seconds

Intro

If you are using Sublime, Sublime Packages can be super helpful! This takes 30 seconds!

Below is first a text version. Underneath it is the graphic version.

 

How to Install Sublime Packages in 30 Seconds (Text Version)

For this example, we downloaded Babel, a transpiler for ES2015:

  1. In Sublime, Command+Shift+P on Apple or Control+Shift+P on Windows
  2. After 1-2 seconds, an input area appears. Type in it ‘Package’
  3. Select ‘Package Control: Install Package’
  4. After 1-2 seconds, a new input area appears. Type in the package you want. Ie. ‘Babel’. Select the package
  5. Sublime downloads it (you can see status at bottom)
  6. Now you can use your package! For Babel, you will go to the bottom right to change input type from Javascript > Babel > Javascript Babel

You’re done and ready to download more packages!

 

How to Install Sublime Packages in 30 Seconds (Graphic Version)

For this example, we downloaded Babel, a transpiler for ES2015:

  1. In Sublime, Command+Shift+P on Apple or Control+Shift+P on Windows
  2. After 1-2 seconds, an input area appears. Type in it ‘Package’
  3. Select ‘Package Control: Install Package’

    Sublime Text 3: Select Package Control: Install Package
    Select Package Control: Install Package
  4. After 1-2 seconds, a new input area appears. Type in the package you want. Ie. ‘Babel’. Select the package

    Sublime Text 3: Type in Package Name to Download
    Type in Package Name to Download
  5. Sublime downloads it (you can see status at bottom)

    Sublime Text 3: See Sublime Installing the Package
    Sublime Installing the Package at Bottom of Window
  6. Now you can use your package! For Babel, you will go to the bottom right to change input type from Javascript > Babel > Javascript Babel
    Sublime Text 3: For Babel, Select the Code Type in Bottom Right
    For Babel, Select the Code Type in Bottom Right
    Sublime Text 3: Select the Language
    Select the Language (Babel Package, JavaScript)

    Sublime Text 3: Babel is Now In Use
    Babel is Now In Use

You’re done and ready to download more packages!