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.
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:
- Number.parseInt
- Number.parseFloat
- Number.isNaN
- Number.isFinite
- Number.isInteger
- Number.isSafeInteger
- Number.EPSILON
- Number.MAX_SAFE_INTEGER
- Number.MIN_SAFE_INTEGER
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