ECMAScript 6 (ES6) course review

ECMAScript 6 (or ES6) is a massive improvement to Javascript. It supports default parameters, template literals, multi-line strings, destructuring assignment, enhanced object literals, arrow functions, promises, block-scoped, constructs: let and const, classes, interfaces, modules and so on.

I found an very good online course on Udacity regarding ES6: https://classroom.udacity.com/courses/ud356.
Let’s start with the first lesson: syntax.

Use let when you plan to reassign new values to a variable:

let someVar = 'some var';

Use const when you don’t plan on reassigning new values to a variable.

const anotherVar = 'another var';

Template literals

const student = {
    name: 'Richard Kalehoff',
    guardian: 'Mr. Kalehoff'
};
const teacher = {
    name: 'Mrs. Wilson',
    room: 'N231'
}
let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;

Destructuring values from an array

const point = [10, 25, -34];
const [x, y, z] = point;

Destructuring values from an object

const gemstone = {
    type: 'quartz',
    color: 'rose',
    karat: 21.29
};
const {type, color, karat} = gemstone;
const circle = {
    radius: 10,
    color: 'orange',
    getArea: function() {
        return Math.PI * this.radius * this.radius;
    },
    getCircumference: function() {
        return 2 * Math.PI * this.radius;
    }
};
let {radius, getArea, getCircumference} = circle;

Notice that getArea = NaN

Object literal shorthand

let type = 'quartz';
let color = 'rose';
let carat = 21.29;
let gemstone = {type, color, carat};

Shorthand method names

const gemstone = {
    type,
    color,
    carat,
    calculateWorth: function() {
    // will calculate worth of gemstone based on type, color, and carat
    }
};
// Becomes
let gemstone = {
    type,
    color,
    carat,
    calculateWorth() { ... }
};

The for loop

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < digits.length; i++) {
    console.log(digits[i]);
}

The for…in loop

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
    console.log(digits[index]);
}

ATTENTION!

Because for…in loops loop over all enumerable properties, this means if you add any additional properties to the array’s prototype, then those properties will also appear in the loop.

For…of loop

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
console.log(digit);
}

EXTRA: You can stop or break a for…of loop at anytime.

Spread operator

const books = ["Don Quixote", "The Hobbit", "Alice in Wonderland", "Tale of Two Cities"];
console.log(...books);

Prints: Don Quixote The Hobbit Alice in Wonderland Tale of Two Cities

const primes = new Set([2, 3, 5, 7, 11, 13, 17, 19, 23, 29]);
console.log(...primes);
Prints: 2 3 5 7 11 13 17 19 23 29

Combining arrays with concat

const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
const produce = fruits.concat(vegetables);
console.log(produce);

Prints: [“apples”, “bananas”, “pears”, “corn”, “potatoes”, “carrots”]

Alternative:

const produce = [...fruits, ...vegetables];
console.log(produce);

Rest parameter

const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);

Prints: 20.17 18.67 1.5 [“cheese”, “eggs”, “milk”, “bread”]

Variadic functions

sum(1, 2);
sum(10, 36, 7, 84, 90, 110);
sum(-23, 3000, 575000);
function sum(...nums) {
    let total = 0;
    for (const num of nums) {
        total += num;
    }
    return total;
}

Leave a Reply Cancel reply