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

Arrays and Collections

Array Extensions

Mark begins with an example of one of the shortcomings of ES5. The logged message here may not be expected.

let salaries = Array(90000);
console.log(salaries.length);

In ES6 we now have Array.of which gives us a way to create just the one element in the array:

let salaries = Array.of(90000);
console.log(salaries.length);

See Array.of() on MDN

Mark also shows a some examples of Array.fromwhich we can use with a lamba function to dynamically set the array element values.

See Array.from() on MDN

Next Mark explains the new fill function using this example:

let salaries = [600, 700, 800];
salaries.fill(900, 1, 2);
console.log(salaries);

The second argument represents the array index to start filling with the value of the first argument. The third argument represents the array index to stop filling, and is not inclusive.

The second argument is optional and it uses the default index of 0 if not specified.

The third argument is also optional and the default value is the last array index.

We can also use the value -1 as a special code:

let salaries = [600, 700, 800];
salaries.fill(900, -1);
console.log(salaries);

See Array.prototype.fill() on MDN

More useful still is the find function which gives us the kind of functionality we would normally use lodash or underscore for in the past. The find function only returns the first matching element, not every matching element.

See Array.prototype.find() on MDN

Mark also gives an example of findIndex which is similar to find but returns the index instead of the element value.

See Array.prototype.findIndex() on MDN

And there’s more. We learn about the copyWithin array extension with several examples including this:

let salaries = [600, 700, 800];
salaries.copyWithin(2, 0);
console.log(salaries);

We can use an optional third argument when we use copyWithin.

See Array.prototype.copyWithin() on MDN

We also see how to use the ... spread operator with entries() and keys()and values()

ArrayBuffers and Typed Arrays

Mark explains that an ArrayBuffer is simply an array of bytes. We see that we can pass in the length of this array:

let buffer = new ArrayBuffer(1024);
console.log(buffer.byteLength);

See ArrayBuffer on MDN

Typed Arrays only apply to numeric types. ES6 has the following Typed Arrays:

Int8Array()
UInt8Array()
UInt8ClampedArray()

Int32Array()
UInt32Array()

Int16Array()
UInt16Array()

Float32Array()
Float64Array()

Mark says we need to be careful and aware of whether the array is signed or unsigned. He shows examples of using each of these Typed Arrays.

See TypedArray on MDN

DataView and Endianness

There are two types of Endian: big endian meaning the most significant byte is first, and little endian, meaning the most significant byte is last.

The DataView view handles endianness for us. It works with Big endian data by default but can be easily set to work with little endian data.

Mark shows examples of DataView being used to process an ArrayBuffer.

See DataView on MDN

Map and WeakMap

Every object in JavaScript is made up of properties and values. We can think of these as keys and values.

Marks explains that in an object the keys have to be strings or numbers (not objects).

If we have an object that we want to key the map off of, we can use Map or WeakMap. A WeakMap doesn’t hold onto the object as strongly as a regular Map.

See Map on MDN

See WeakMap on MDN

Set and WeakSet

Mark explains these are similar to Map and WeakMap, but they deal with single values or single objects.

We see several examples of using Set and WeakSet, and see that we get a runtime error when we try to run this:

let perks = new WeakSet([1, 2, 3]);
console.log(perks.size);

This is because WeakSet only works with objects, not numbers.

See Set on MDN

See WeakSet on MDN

Subclassing

In ES6 we can now extend an array. Mark warns that although the newest browsers support subclassing, the transpilers do not. Here is one of the examples in this lesson:

class Perks extends Array {
}
let a = Perks.from([5, 10, 15]);
console.log(a instanceof Perks);

We also see that we can use this to create a class which reverses the Array, and a class with a sum function.

See Array.from on MDN