Getting Started with ES6 – Part 2

Hey guys,

This is a continuation of my last post on getting started with ES6. In this post we’re going to look at the various components of ES6 in detail and how you can use them. ES6 makes use of the following components.

Modules

Modules in ES6 are a way to spread our work across multiple files and directories. An ES6 module is a file containing JS code. There’s no special module keyword since in ES6 a module mostly reads just like a script. There are two main differences though:

• ES6 modules are automatically strict-mode code, even if you don’t write “use strict”; in them
• You can use the import and export functions in ES6 modules

Everything declared inside a module is local to the module, by default. So if you want something declared in a module to be public (so other modules can use it) you must export that feature in the following manner:


export function detectSettings(canvas) {
}


We can export any top-level function, class, var, let, or const.

In a separate file, we can import and use the detectSettings() function like:

Import {detectSettings} from “config.js”;

Classes


class Circle {
constructor(radius) {
this.radius = radius;
Circle.circlesMade++;
};

static draw(circle, canvas) {
// Canvas drawing code
};

static get circlesMade() {
return !this._count ? 0 : this._count;
};

static set circlesMade(val) {
this._count = val;
};

area() {
return Math.pow(this.radius, 2) * Math.PI;
};

get radius() {
return this._radius;
};

set radius(radius) {
if (!Number.isInteger(radius))
throw new Error("Circle radius must be an integer.");
this._radius = radius;
};
}


var circle = new Circle(10);
console.log(circle.area());

circle.radius = 15;
console.log(circle.area());

console.log(Circle.circlesMade);

In the above code, the constructor function will be called whenever the Circle class is created with a new keyword. Apart from that:

• Static members can be defined using the static keyword
• Methods can be added without a function keyword like area() in the above class
• Accessors can be defined with the help of get and set keywords
• A getter defined in this manner must have no arguments
• A setter defined in this manner must have exactly one argument

Subclassing

The other component used in ES6 script is sub-classes. Like traditional class systems (C# or Java), ES6 allows for inheritance, where one class uses another as a base, and then extends it by adding more features of its own. For example:


class Circle extends Shape {
}

class ScalableCircle extends Circle {
get radius() {
return this.scalingFactor * super.radius;
}
}


In the above code, the new super keyword enables you to access parent class methods and properties.

Symbols

Then there are symbols. Since ECMAScript doesn’t support private members in a class, it provides a better way to do this using symbols. ES6 symbols are values but they’re not strings. They’re not objects either. They are unique and immutable data types that can be used as an identifier for object properties. So if we don’t have the symbol, you cannot access the property. Symbols are useful for the uniqueness of the name, but this uniqueness doesn’t imply privacy. Uniqueness simply means that if you need a key that must not conflict with any other key, you can create a new symbol for it.

The following code sample will give you a better idea of how symbols are used is ES6.


var ageSymbol = Symbol();
class Animal {
constructor(name) {
this.name = name;
this[ageSymbol] = 0;
}

get age() {
return this[ageSymbol];
}

set age(value) {
if (value < 0) { console.log("We do not support undead animals"); } this[ageSymbol] = value; } }

Iterators

In ES6 the for–of loop works on collections that have an iterator method. A for–of loop starts by calling the [Symbol.iterator]() method on the collection. This returns a new iterator object. An iterator object can be any object with a .next() method; the for–of loop will call this method repeatedly, once each time through the loop.
For example, here’s the simplest iterator object:


var zeroesForeverIterator = {
[Symbol.iterator]: function () {
return this;
},
next: function () {
return {done: false, value: 0};
}
};


Every time this .next() method is called, it returns the same result, telling the for–of loop (a) we’re not done iterating yet, and (b) the next value is 0. This means that for (value of zeroesForeverIterator) {} will be an infinite loop. As such, iterators allow you to make your custom classes iterable.

Generators

In ES6, the code below is called a generator-function and it has a lot in common with functions. But we can see two differences right away:

• Regular functions start with function while the generator-function start with function*
• Inside a generator-function, yield is a keyword with syntax rather like return


function* quips(name) {
yield "hello " + name + "!";
yield "i hope you are enjoying the blog posts";
if (name.startsWith("X")) {
yield "it's cool how your name starts with X, " + name;
}
yield "see you later!";
}


The key difference between a normal function and a generator-function is that while a function (even a generator-function) can only return once, a generator-function can yield any number of times. The yield expression suspends execution of the generator so it can be resumed again later. That’s basically the big difference between regular functions and generator-functions. Regular functions can’t pause themselves, generator-functions can.

Explore our blog

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services.