Rapid ES6 Training: New Types and Object Extensions

mark-zamoyta-v1

Welcome to Part 3 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.

New Types and Object Extensions

Symbols

Symbols is a new concept, and is used to create a unique string.

“A Symbol is a unique and immutable data type and may be used as an identifier for object properties.” – Mozilla Developer Network

Mark explains that we can’t access the identifier that gets generated.

The first code example that Mark shows informs us that we have a new type for the Symbol:

let eventSymbol = Symbol('resize event');
console.log(typeof eventSymbol);

Next we confirm that we can’t see the identifier that gets generated:

let eventSymbol = Symbol('resize event');
console.log(eventSymbol.toString());

We also learn that we can assign the value to a constant, and that Symbol creates a unique value even when the seed (or key) is the same.

Next, there’s an example of using the Symbol registry:

let s = Symbol.for('event');
console.log(s.toString());

We can use this technique for testing for equality:

let s = Symbol.for('event');
let s2 = Symbol.for('event');
console.log(s === s2);

Mark shows a similar example where s2 has the key value ‘event2’.

Next up, how to fetch the human readable value:

let s = Symbol.for('event');
let description = Symbol.keyFor(s);
console.log(description);

Mark explains that Symbols tend to be used as a property. And we see some examples of how to do this.

Well-known Symbols

These are symbols that are used as properties on objects that are standardized.

The results of this attempt are not very useful:

let Blog = function () {
};
let blog = new Blog();
console.log( blog.toString() );

But in ES6 we can now use a well-known symbol:

let Blog = function () {
};
Blog.prototype[Symbol.toStringTag] = 'Blog  Class';
let blog = new Blog();
console.log( blog.toString() );

Mark says this is meta-programming: altering the way the JavaScript engine calls toString.

There is also an example of using the well-known Symbol.isConcatSpreadable, and we see what happens when we set this to false.

Next is an example of using Symbol.toPrimitive

For full details about using Symbol Mark recommends this MDN article

Object Extensions

Object has been extended in ES6. We see the setPrototypeOf method first:

let a = {
        x: 1
};
let b = {
        y: 2
};

Object.setPrototypeOf(a, b);
console.log(a.y);

Kind of funky. Next up is an example of using Object.assign:

let a = {a: 1},b = { b: 2};

let target = {};
Object.assign(target, a, b);
console.log(target);

Some strange behavior that meets the ES5 (and ES6) spec can be observed with this code:

let amount = NaN;
console.log(amount === amount)

We have Object.is in ES6 to give us a better way to compare

let amount = NaN;
console.log(Object.is(amount, amount));

There is also no distinction between + and – 0

let amount = 0, total = -0;
console.log(amount === total);

Again Object.is comes to the rescue:

let amount = 0, total = -0;
console.log(Object.is(amount, total));

String Extensions

Mark demonstrates the following extensions:

They work exactly how you would expect:

let title = 'Santa Barbara Surf Riders';
console.log(title.startsWith('Santa'));
console.log(title.startsWith('Rider'));
console.log(title.includes('ba'));

We also see the new ES6 unicode syntax:

let title = "Surfer's \u{1f3c4} Blog";
console.log(title);

Mark explains astral plane values. This one is very cool so be sure to stick this into your console.

wipeout

The next example shows the length of the Unicode. We also see a trick for treating each emoji as one character, and some more nautically themed emoji!

There’s an example for outputting an accent character, and the string extension to normalize the result.

We also learn:

Number Extensions

Covered here is examples of the following methods:

Math Extensions

Mark gives a quick overview of the many new Math functions available in ES6.

There’s then a few different code examples for Math.Sign and a variety of others.

RegExp Extensions

We begin with some code examples demonstrating RegExp.test

Then Mark demonstrates RegExp.lastIndex and RegExp.flags

See RegExp on MDN for all RegExp methods

Function Extensions

Mark begins with function.name, which is very useful for logging without a lot of hardcoded strings. We see that this works even for anonymous functions!

There are actually many examples for this extension to describe how it works in different scenarios.

Function.name isn’t writing but it is configurable with Object.defineProperty(). See Mark’s Rapid JavaScript Training course for details on that.

See function on MDN for all function extensions

Part 4 Iterators, Generators and Promises is coming soon

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 )

Connecting to %s