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

In this course you’ll get very used to hearing the question “what shows in the console?”

New ES6 Syntax

let, const and Block Scoping

(Also see Advanced JavaScript – Block Scoping and Dynamic Scope, Hoisting and this)

All of the examples in this course begin with the ‘use strict’ command. I have omitted typing this out each and every time, but bare in mind that all of these examples use strict mode.

The course contains many code examples that are not covered in this article.

What shows in the console here?

console.log(productId);
var productId = 12;

Mark explains how hoisting affects the result here. What about using let instead of var?

console.log(productId);
let productId = 12;

or this?

let productId = 12;
console.log(productId);

There are several more little coding Q and A’s here. We learn that the let keyword gives us block scoping, see an example of the temporal dead zone, and another example involving a closure.

Using the let keyword can be useful in a for loop.

The const keyword is very simple: it’s just declaring a constant, but we must initialize it.

Arrow Functions

These use what we call the fat arrow syntax =>

We start with simple examples of it being used to log “function” and 5.99. Then we see it used in a two parameter price calculation function.

Mark says although arrow functions save us a few keystrokes, the real reason for it is to handle the this keyword. We look at an example using a standard function:

document.addEventListener('click', function () {
console.log(this);
});

Mark says this one might work differently in different browsers and gives the result from Chrome. What does it display when we use an arrow function instead?

document.addEventListener('click', () => console.log(this));

We also see another example of how this works differently with the arrow function, and a few other examples including this final one, which works differently to ES5 functions:

var getPrice = () => 5.00;
console.log(getPrice.hasOwnProperty("prototype"));

Default Function Parameters

Here’s the first code example:

var getProduct = function(productId = 1000) {
console.log(productId);
};
getProduct();

Rest and Spread

Here’s the first code example:

var showCategories = function (productId, ...categories) {
console.log(categories instanceof Array);
};
showCategories(123, 'search', 'advertising');

Object Literal Extensions

This is a convenient shorthand. Here’s the first code example:

var price = 5.99, quantity = 30;
var productView = {
price,
quantity
};
console.log(productView);

for … of loops

A new kind of for loop in ES6 that works with iterables.

var categories = ['hardware', 'software', 'vaporware'];
for (var item of categories) {
console.log(item);
}

Octal and Binary Literals

To log the decimal equivalent of an Octal:

var value = 0o10;
console.log(value);

To log the decimal equivalent of a binary number:

var value = 0b10;
console.log(value);

Template Literals

A string template with interpolated variables:

let invoiceNum = '1350';
console.log(`Invoice Number: ${"INV-" + invoiceNum}`);

We see that new line and tab characters are preserved.

Destructuring

We can assign multiple values to new variables

let salary = ['32000', '50000', '75000'];
let [ low, average, high ] = salary;
console.log(average);

We see an example showing that we can skip elements by using an extra comma.

We can also combine destructuring with rest parameters to assign an array value to a variable:

let salary = ['32000', '50000', '75000'];
let [ low, ...remaining ] = salary;
console.log(remaining);

We can also combine destructuring with default parameters.

Mark also shows an example using an array of an array, followed by how to use destructuring to do assignment.

In the final example we see that we can assign multiple variables a value based on one string value:

let [maxCode, minCode] = 'AZ';
console.log(`min: ${minCode} max: ${maxCode}`);

Advanced Destructuring

Mark says there are some nuances and edge cases with destructuring.

The first example of this is:

let [high, low] = [,];
console.log(`high: ${high} low: ${low}`);


Is this valid in JavaScript?

We also see some examples of using destructuring within a for loop, such as :

for (let [a, b] of [[5, 10]]) {
   console.log(`${a} ${b}`);
}

 

Part 2 – ES6 Modules and Classes is coming soon