(na-na-na-na-na-na-na)

Over the last few months I have used ES6 features in projects, but I found myself wanting a deeper knowledge of them. (The release of a chrome browser that has 90+ percent coverage of those new features had nothing to do with it… [okay maybe it did a little bit]). As I worked my way through these exercises, it became quite clear the effort being put into making JavaScript a much more concise language in the future.

Template Literals | Template Strings

`string text ${expression} string text`

Template strings are enclosed in back ticks instead of quotes. In this example the ${expression} acts as a placeholder for our variable. It’s like being able to run a toString is as few words as possible.

this is the old ES5 way of creating classes

Constructing a Class

The class constructor helps make writing classes actually feel like you’re writing a class in JavaScript(They exist now!). In the past, having to write a class by attaching constantly through prototypes always feels/felt hacky. In this case we have made a very minimal version of a game character with health property. A huge difference here, is that when writing a function to become a method inside a class, is lack of the constant use of the this keyword. (Ex. this.damage = function() {} etc..)

class Character {

constructor(x,y) {

this.x = x;

this.y = y;

this.health_ = 100;

} damage() {

this.health_ = this.health_ — 10;

} getHealth() {

return this.health_;

} toString() {

return ‘x: ‘ + this.x + ‘ y: ‘ + this.y + ‘ health: ‘ +

this.getHealth();

} }



It really seems to help me reason about the class I am making more simple. Instead of having to mentally trace the ‘this’ keyword every time, we know these methods are living in this class and are readily available.

I think everyone who has gone through learning JS has at one point wanted to destroy the keyword this, so I don’t miss it and can really appreciate the time the class constructor is saving. It goes back to my earlier point of ES6 being so wonderfully concise.

Extending a class…



class Player extends Character {

constructor(x, y, name) {

super(x, y);

this.name = name;

}

move(dx, dy) {

this.x += dx;

this.y += dy;

}

toString() {

return “name: “ + this.name + “ “+ super.toString();

}

}

…is lovely and amazingly easy. It follows the same structure as class construction, and accessing any parent method can be accomplished by using the ‘super’ keyword.

super this, super that, super hit me with a whiffle ball bat.

Modules!

These are exciting for the fact that they help your application only require the bare minimum of things it needs to run. With a traditional require statement, an entire file/module is imported even though only one method may be needed by the file importing it.

Now with ES6 it allows us to only require the bare minimum of what we need to import. New keywords include ‘import’ and ‘export’. Import takes the place of require, and export takes the places of good old ‘module.exports’.

Example import statement. The imported values can be called upon with the same names they were imported with.

//import.js file

`import { PI, sqrt, square } from ‘./math’;` //PI becomes available by the same name

console.log(PI);

Example export statements



export const PI = 3.141592; function _sqrt(s, x, last) {

return x != last ? _sqrt(s, (x + s / x) / 2.0, x) : x;

} export funsction sqrt(s) {

return _sqrt(s, s/2.0, 0.0);

} export function square(x) {

return x * x;

}



Exporting Default

This feels just like module.exports in common js. When you import a module that has been exported using the `export default`, you get the whole object, and you don’t have to know the name of it.

Example of a file using export default:

const PI = 3.141592; function _sqrt(s, x, last) {

return x != last ? _sqrt(s, (x + s / x) / 2.0, x) : x;

} function sqrt(s) {

return _sqrt(s, s/2.0, 0.0);

} function square(x) {

return x * x;

} export default {

PI: PI,

sqrt: sqrt,

square: square

};



Thanks for reading! Later this week I will be releasing parts 2 & 3, with such wonderful topics as LET, CONST and even Arrow functions!!!!!

(This means an `Arrow` joke…)