📝 Rapid ES6 Training — Notes

rapid-es6-training-notes.js

// Hoisting

'use strict';

console.log(productId); // undefined

var productId = 12;

// No hoisting with let keyword

'use strict';

console.log(productId); // ReferenceError

let productId = 12;

// let + block scoping

'use strict';

let productId = 12;
{
    let productId = 13;
}

console.log(productId); // 12

// let + block scoping - ReferenceError

'use strict';

{
    let productId = 13;
}

console.log(productId); // ReferenceError

// Block scoping

'use strict';

function updateProductId() {
    productId = 12;
}

let productId = null;
updateProductId();
console.log(productId); // 12

// Block scoping: let + for loop

'use strict';

let productId = 42;
for (let productId = 0; productId < 10; productId++)
{

}

console.log(productId); // 42

// Block scoping: var + for loop

'use strict';

var productId = 42;
for (var productId = 0; productId < 10; productId++)
{

}

console.log(productId); // 10

// var + loop (closures)

'use strict';

let updateFunctions = [];

for (var i = 0; i < 2; i++) {
    updateFunctions.push(function () {return i;});
}

console.log(updateFunctions[0]()); // 2
console.log(updateFunctions[1]()); // 2
console.log(updateFunctions[9]()); // TypeError: updateFunctions[9] is not a function

// let + loop (closures)

'use strict';

let updateFunctions = [];

for (let i = 0; i < 2; i++) {
    updateFunctions.push(function () {return i;});
}

console.log(updateFunctions[0]()); // 0
console.log(updateFunctions[1]()); // 1

// Arrow function

'use strict';

var getPrice = () => 5.99;

console.log(getPrice()); // 5.99
console.log(typeof getPrice); // function

// Arrow function with input (argument)

'use strict';

var getPrice = count => 2 * count;

console.log(getPrice(2)); // 4

// Arrow function with multiple inputs (arguments)

'use strict';

var getPrice = (count, tax) => 2 * count * (1 + tax);

console.log(getPrice(2, .07)); // 4.28

// Arrow function with multiple inputs (arguments) - in block

'use strict';

var getPrice = (count, tax) => {
    var price = count * 2;
    price *= (1 + tax);
    return price; // note return keyword
};

console.log(getPrice(2, .07)); // 4.28

// Arrow function - this

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

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

// this in function

'use strict';

var invoice = {
    number: 123,
    process: function() {
        console.log(this);
    }
};

invoice.process(); // Object { number: 123, process: process()

// this in arrow function

'use strict';

var invoice = {
    number: 123,
    process: () => console.log(this)
};

invoice.process(); // Window

// this in arrow function - bind, call

'use strict';

var invoice = {
    number: 123,
    process: function() {
        return () => console.log(this.number);
    }
};

var newInvoice = {
    number: 456
};

invoice.process().bind(newInvoice)(); // 123
invoice.process().call(newInvoice)(); // 123

// Rest

'use strict';

var showCategories = function(productId, ...categories) {
    console.log(categories instanceof Array); // true
    console.log(categories); // Array [ "a", "b" ]
};

showCategories(123, 'a', 'b');

// Spread ("opposite of rest")

'use strict';

var prices = [12, 20, 18];

var maxPrice = Math.max(...prices);
console.log(maxPrice); // 20

// Spread - Math.max for string

'use strict';

var maxPrice = Math.max(..."43210");
console.log(maxPrice); // 4

// Spread - chars

'use strict';

console.log("A", ..."BCD", "E"); // A B C D E

// for ... of loop

'use strict';

var letters = ['a', 'b', 'c'];

for (var letter in letters) {
    console.log(letter); // 0 1 2
}

for (var letter of letters) {
    console.log(letter); // a b c
}

// Template literals

'use strict';

let invoiceNum = '1350';

console.log(`Invoice number: ${invoiceNum}`);  // Invoice number: 1350
console.log('Invoice number: ${invoiceNum}');  // Invoice number: ${invoiceNum}
console.log("Invoice number: ${invoiceNum}");  // Invoice number: ${invoiceNum}
console.log(`Invoice number: \${invoiceNum}`); // Invoice number: ${invoiceNum}

// Tagged template literals

'use strict';

function processInvoice(segments) {
    console.log(segments); // Array [ "template" ]
    console.log(typeof segments); // object
};

processInvoice `template`;

// Tagged template literals

'use strict';

function processInvoice(segments, ...values) {
    console.log(segments);
    console.log(values);
};

let invoiceNum = '1350';
let amount = '2000';

processInvoice `Invoice: ${invoiceNum} for ${amount}`;

/*
Array(3) [ "Invoice: ", " for ", "" ]
Array(2) [ "1350", "2000" ]
*/

// Destructuring (it requires iterator!)

'use strict';

let salary = ['32000', '50000', '75000'];
let [low, avg, high] = salary;

console.log(avg); // 50000

// Destructuring

'use strict';

let salary = ['32000', '50000'];
let [low, avg, high] = salary;

console.log(high); // undefined

// Destructuring + rest

'use strict';

let salary = ['32000', '50000', '75000'];
let [low, ...remaining] = salary;

console.log(remaining); // Array [ "50000", "75000" ]

// Destructuring

'use strict';

let salary = ['32000', '50000', '75000'];
let [low, avg = '20000', high] = salary;

console.log(avg); // 50000

// Modules:

// module.js:

export let projectId = 99;

// index.js:

import { projectId } from './module.js';

console.log(projectId);

// Modules - alias + import multiple:

// module.js:

export let projectId = 99;
export let projectName = 'BuildIt';

// index.js:

import { projectId as id, projectName } from './module.js';

console.log(`${projectName} has id: ${id}`);

// Modules - ordering:

// module.js:

export let projectId = 99;
console.log('in module');

// index.js:

console.log('starting in base');
import {projectId} from './module';
console.log('ending in base');

/*
in module
starting in base
ending in base
*/

// Modules - export default (works with alias (as keyword) as well)

// module.js:

export let projectId = 99;
export default projectId;

// index.js:

import something from './module'; // note curly braces are missing
console.log(something); // 99

// Modules - import *:

// module.js:

let projectId = 99;
let projectName = 'BuildIt';

export {projectId, projectName};

// index.js:

import * as values from './module';

console.log(values); // Object { projectId: 99, projectName: BuildIt }
console.log(values.projectId); // 99
console.log(values.projectName); // BuildIt

// Modules - imported variables are read-only:

// module.js:

let projectId = 99;
export {projectId};

// index.js:

import {projectId} from './module';
projectId = 100;
console.log(projectId); // ReferenceError: assignment to undeclared variable projectId

// Modules - ...but object properties are not read-only:

// module.js:

export let project = {
    projectId: 99
};

// index.js:

import {project} from './module';
project.projectId = 100;
console.log(project.projectId); // 100

// Modules - objects are in sync within modules:

// module.js:

export let project = {
    projectId: 99
};

export function showProject() {
    console.log(project.projectId);
};

// index.js:

import {project, showProject} from './module';
project.projectId = 100;
showProject();
console.log(project.projectId); 

/*
100
100
*/

// Modules - functions:

// module.js:

export function showProject() {
    console.log('in original');
}

export function updateFunction() {
    showProject = function() {
        console.log('in updated');
    };
}

// index.js:

import {showProject, updateFunction} from './module';

showProject();
updateFunction();
showProject();

// Class - typeof/instanceof:

class Task { }
let task = new Task();

console.log(typeof Task); // function
console.log(typeof task); // object
console.log(task instanceof Task); // true

// Class - method:

class Task {
    showId() {
        console.log('99');
    }
}

let task = new Task();
task.showId(); // 99

console.log(task.showId == Task.prototype.showId); // true

// Class - constructor:

class Task {
    constructor() {
        console.log('constructing');
    }
    showId() {
        console.log('99');
    }
}

let task = new Task();

/*
constructing
*/

// Class - classes are not hoisted:

let task = new Task();

class Task {
    constructor() {
        console.log('constructing');
    }
}

/*
 ReferenceError: can't access lexical declaration `Task' before initialization
*/

// Class - as expression:

let newClass = class Task {
    constructor() {
        console.log('constructing');
    }
};

new newClass();

/*
constructing
*/

// Class - inheritance:

class Project {
    constructor() {
        console.log('constructing Project');
    }
}

class SoftwareProject extends Project {
    constructor() {
        super();
        console.log('constructing Software Project');
    }
}

let p = new SoftwareProject();

/*
constructing Project
constructing Software Project
*/

// Class - inheritance - super in method:

class Project {
    getTaskCount() {
        return 50;
    }
}

class SoftwareProject extends Project {
    getTaskCount() {
        return super.getTaskCount() + 1;
    }
}

let p = new SoftwareProject();
console.log(p.getTaskCount()); // 51

// Class - static method (this doesn't work with properties in that way):

class Project {
    static getDefaultId() {
        return 1;
    };
}

console.log(Project.getDefaultId()); // 1

// Class - static property:

class Project { }

Project.id = 99;

console.log(Project.id); // 99

// now.target - typeof:

class Project {
    constructor() {
        console.log(typeof new.target);
    }
};

var p = new Project(); // function

// Symbol:

/*
Symbols created using Symbol() are unique and immutable, so the only way
you can reference it is by assigning it to a variable.
*/

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

// Symbol - equality:

let s = Symbol('Event');
let s2 = Symbol('Event');

console.log(s === s2); // false

// Symbol.for:

/*
Symbol.for on the other hand stores Symbols in a global registry
list using the specified key, so for your example to work you need
to both create and access the symbol using Symbol.for
*/

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

console.log(s.toString()); // Symbol(event)
console.log(s == s2); // true
console.log(s === s2); // true

// Symbol.keyFor:

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

console.log(typeof description); // string
console.log(description); // event

// Object - setPrototypeOf:

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

console.log(a.b); // undefined
Object.setPrototypeOf(a, b);
console.log(a.b); // 2

// Object - assign:

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

let target = {};

Object.assign(target, a, b, a2);

console.log(target); // Object { a: 2, b: 2 }

// Iterator:

let ids = [1, 2, 3];
console.log(typeof ids[Symbol.iterator]); // function

let it = ids[Symbol.iterator]();
console.log(it.next()); // Object { value: 1, done: false }
console.log(it.next()); // Object { value: 2, done: false }
console.log(it.next()); // Object { value: 3, done: false }
console.log(it.next()); // Object { value: undefined, done: true }

// Generator:

function *process() {
    yield 1;
    yield 2;
};

let it = process();
console.log(it.next()); // Object { value: 1, done: false }

// Generator + yield:

function *process() {
    yield;
};

let it = process();
console.log(it.next()); // Object { value: undefined, done: false }

// Generator + yield:

function *process() {
    let result = yield;
    console.log(`result is ${result}`);
};

let it = process();
console.log(it.next());
console.log(it.next(123));
console.log(it.next(456));

/*
Object { value: undefined, done: false }
result is 123
Object { value: undefined, done: true }
Object { value: undefined, done: true }
*/

// Generator + iterator delegation -- yield* (without asteriks, the whole array is returned)

function *process() {
    yield 42;
    yield* [1, 2, 3];
};

let it = process();
console.log(it.next().value); // 42
console.log(it.next().value); // 1
console.log(it.next().value); // 2
console.log(it.next().value); // 3

// Collections - Array.of:

console.log(new Array(9000).length); // 9000
console.log(Array.of(9000).length);  // 1

// Entries (for returning indices):

let ids = ['A', 'B', 'C'];
console.log(...ids.entries());

/*
Array [ 0, "A" ]
Array [ 1, "B" ]
Array [ 2, "C" ]
*/