ES6 Modules and Classes

mark-zamoyta-v1

Welcome to Part 2 of this review of the Pluralsight course Rapid ES6 Training by Mark Zamoyta.

Mark started in the developer world over 25 years ago.

He has written numerous mobile apps and games for clients including Electronic Arts and Yahoo! Games.

Rapid ES6 Training is the final course in the new JavaScript learning path.

The aim of the course is for you to be able to use the new syntax and features of ES6, and the prerequisite is to be familiar with the earlier ES5 version of JavaScript.

ES6 Modules and Classes

Introduction and Setup

Mark says ES6 modules was separated out into it’s own project.

He shows us how to get our environment setup so that we can load modules properly.

We need two scripts: a transpiler (e.g. Traceur or Babel) and the ES6 module loader (es6-module-loader-dev.js)

Module Basics

In the first part of the series I said all examples use strict mode.

There’s actually an example here that doesn’t declare strict mode, but we see the error:

Runtime Error:
Variable undefined in strict mode

Simply by loading a module, the module loader will put us into strict mode. This was included in the ES6 specification to prevent variables accidentally getting exposed into the global namespace.

We see that the import and export keywords are used to share information between modules, and we can import as many functions and variables as we want to.

Named Exports in Modules

Can we update an imported variable?

File base.js

import { projectId } from 'module1.js';
projectId = 8000;
console.log(projectId);

File module1.js

export let projectId = 99;

What about if we do this? Can we modify the properties of the module?

File module1.js

export let projectId = {
projectId: 99;
};

We also see a more complex example. Then we see this example of exporting functions:

File base.js

import { showProject, updateFunction } from 'module1.js';
showProject();
updateFunction();
showProject();

File module1.js

export function showProject() { console.log('in original'); }
export function updateFunction() {
showProject = function () { console.log('in updated'); };
};

Is showProject going to hold on to the initial function?

Class Fundamentals

There’s a new class keyword in ES6. It’s not the same as classes in languages like C# or Java. We can think of it as a new syntax for working with prototypes and the constructors functions that we would use in ES5.

Our first example tells us the type of a class:

class Task {
}
console.log(typeof Task);

But what if we assign an instance of a class to a variable?

class Task {
}
let task = new Task();
console.log(typeof task);

Many other examples are also given here. We can get a better understanding of what ES6 classes are about with this test:

class Task {
showId() {
console.log('99');
  }
}
let task = new Task();
console.log(task.showId === Task.prototype.showId);

At the end of this lesson we see that ES6 classes can help protect us from polluting the global namespace.

extends and super

We can use “prototypical inheritance” with classes in ES6.

You can see Getify’s Object Prototypes for clarification on that term. Or you can watch Mark’s Rapid JavaScript Training course which goes into detail on how prototypes work.

This first example is about as simple as it gets. Try running it yourself.

class Project {
        constructor() {
                console.log('constructing Project');
        }
}

class SoftwareProject extends Project {
}

let p = new SoftwareProject();

We also see a similar example which passes an argument to the constructor. Then there’s this example using super:

class Project {
        constructor() {
                console.log('constructing Project');
        }
}

class SoftwareProject extends Project {
constructor() {
super();
console.log('constructing SoftwareProject');
}
}

let p = new SoftwareProject();

In the next example we learn what happens if we comment out the call to super().

Then we also comment out the Project constructor. We still get an error.

So we come back to the example above, which shows the correct way.

This lesson has some examples looking at methods.

Properties for Class Instances

We can have properties at the class level, which will be covered later.

Here we look at properties for class instances.

class Project {
    constructor() { this.location = 'Matzalan'; }
}
class SoftwareProject extends Project {
    constructor() {
         super();
    }
}
let p = new SoftwareProject();
console.log(p.location);

We learn what happens when we use the let location instead of the this.location keyword. And we see an example using this.location across different classes.

Static Members

We have a static keyword in ES6:

class Project {
    static getDefaultId() {
         return 0;
    }
}
console.log(Project.getDefaultId());

No surprises in this above example. But how about this:

class Project {
    static getDefaultId() {
         return 0;
    }
}
var p = new Project();

console.log(Project.getDefaultId());

And is this allowed?

class Project {
    static let id = 0;
}

console.log(Project.id);

Or this?

class Project {
}
Project.id = 99;

console.log(Project.id);

new.target

Mark says new.target is a strange new property. It’s mainly used in a constructor.

What type is it?

class Project {
    constructor() {
console.log(typeof new.target);
   }
}

var p = new Project();

We learn that new.target points directly to the constructor.

Now what gets logged here?

class Project {
    constructor() {
console.log(new.target);
   }
}
class SoftwareProject extends Project {

        constructor() {
            super();
        }
}
var p = new Project();

The answer to this and other examples are explained by Mark in this lesson.

In the next article, we’ll be reviewing the module “New Types and Object Extensions”. See you again soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s