Quiz time!

Who is this?

left-pad

module.exports = leftpad;
function leftpad (str, len, ch) {
    str = String(str);
    var i = -1;
    if (!ch && ch !== 0) ch = ' ';
    len = len - str.length;
    while (++i < len) {
        str = ch + str;
    }
    return str;
}

Quiz time!

20

150

x

3

Quiz time!

20

150

x

3

= 1000

let, const: hoisting

let, const: Example

// var, let and const are available in all sub-blocks
    
var varName = 'Angus';
let letName = 'Angus';
const constName = 'Angus';

if (true){
    
    console.log(varName);   // Angus
    console.log(letName);   // Angus
    console.log(constName); // Angus
    
    varName = 'Donna';
    letName = 'Donna';
    constName = 'Donna'; // ERROR!
        
}

console.log(varName);   // Donna
console.log(letName);   // Donna
console.log(constName); // Angus

let, const: Example 2

// But only var is available outside of block scope

if (true){

    var varName = 'Angus';
    let letName = 'Angus';
    const constName = 'Angus';
        
}

console.log(varName);   // Angus
console.log(letName);   // letName is not defined
console.log(constName); // constName is not defined

let, const: let

for (let i = 0; i > 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

for (let i = 0; i > 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}
        
console.log(i); // ReferenceError: i is not defined

if (true){
    let letName = 'fritz';
}

console.log(letName); // ReferenceError: i is not defined

let, const: const

// const with int value
const year = 2016;

year = 2017; // Error!


const person = {};

person.name = 'Ingrid';
person.age  = 32;

person = { 'name' : 'Ingrid' }; // Error!
person = 'test'; // Error!

template strings: Example

// ES5
var person = {
    name: 'Jon Snow',
    status = 'dead'
}

console.log('I\'m pretty sure ' + person.name + ' is ' + person.status);


// ES6
const person = {
    name: 'Jon Snow',
    status = 'alive'
}

console.log(`I've read online that ${person.name} is ${person.status}`);

template strings: Example

// No more newline characters


// ES5
console.log('string text line 1\n\ string text line 2');


// ES6
console.log(
    `string text line 1
    string text line 2`
);  

Default parameters: Example

// Basic example

function add(x=0, y=0) {
    return x + y;
}

add(); // 0
add(1); // 1
add(2, 3); // 5

Default parameters: Example

Quiz time!

Who is this?

Answer:

Murdoc!

MacGyver's nemesis...

Arrow functions: Concept

// ES5 function
const person = {
    greet: function(name) {
        return `hi, ${name}`;
    }
}

Arrow functions: Example

// ES5 - Movie plot generator

const plots = [
    'avenge dead wife',
    'use skillset to eliminate threat to nation',
    'save daughter'
];

const createMoviePitch = function(plot) {
    console.log(`Liam Neeson has to ${plot}`);
};

// Make it rain!
plots.map( function(plot) {
    return createMoviePitch(plot)
});

Arrow functions: Example

// ES6 - Movie plot generator

const plots = [
    'avenge dead wife',
    'use skillset to eliminate threat to nation',
    'save daughter'
];

const createMoviePitch = function(plot) {
    console.log(`Liam Neeson has to ${plot}`);
};

// Make it rain!
plots.map( (plot) => {
    return createMoviePitch(plot)
});

Arrow functions: Example

// ES6 - Movie plot generator

const plots = [
    'avenge dead wife',
    'use skillset to eliminate threat to nation',
    'save daughter'
];

const createMoviePitch = (plot) => {
    console.log(`Liam Neeson has to ${plot}`);
};

// Make it rain!
plots.map( plot => createMoviePitch(plot));

Arrow functions: Anatomy

// Passing arguments 
() => { ... }   // no argument
x => { ... } // one argument
(x, y) => { ... } // several arguments


// Function bodies
x => { return x * x }  // block
x => x * x  // expression, equivalent to previous line

Arrow functions: `this`

Destructuring: Example

// ES5 object creation

const person = {
    name: 'Tim Samson',
    features: {
        face: 'round',
        arms: 'sort',
        hair: false
    }
}

// Imagine if you had to do this instead:
const person = {};

person.name = 'Tim Samson';
person.features = {};
person.features.face = 'round';
person.features.arms = 'sort';
person.features.hair = false;

Destructuring: Example

Destructuring: argument

// Useful when you only care about certain parameters

const menu = {
    appetiser: 'flea soup'
    mains: 'locust eggs'
    dessert: 'goblin sorbet'
}

function orderDessert({dessert}){
    console.log(`Can I please have a bucket of ${dessert}, please?`);
}

orderDessert(menu); // Can I please have a bucket of goblin sorbet, please?

Destructuring: defaults

// Provide a default value if property doesn't exist

const person = {
    name: 'Draco',
    age: 673
}

const { name = 'Ricardo', height = '180cm' } = person;

console.log(name);      // Draco
console.log(age);       // 673
console.log(height);    // 180cm

Destructuring: defaults

// Variable unpacking - common react pattern

// ES5
var author = this.props.author;
var posts = this.props.posts;
var bio = this.props.bio;
    
// ES6
const { author, posts, bio } = this.props;  

modules: Basic example

/**
 * CommonJS (Node)
 */
var _ = require('lodash');
_.join(['a', 'b', 'c'], '~'); // → 'a~b~c'


/**
 * AMD (RequireJS)
 */
define(['lodash'] , function (_) {
    return function () {
        _.join(['a', 'b', 'c'], '~'); // → 'a~b~c'
    };
});


/**
 * ES6 modules
 */
import _ from 'lodash';
_.join(['a', 'b', 'c'], '~'); // → 'a~b~c'

modules: Named Exports

// --- animalFarm.js --- //

export const napoleon = {
    species = 'pig',
    speak() => { console.log('Four legs good, two legs bad'); }
};
export const boxer = {
    species = 'horse',
    speak() => { console.log('I will work harder'); }
};

// --- main.js --- //

// Named imports
import { napoleon, snowball } from 'animalFarm';

napoleon.speak();

// Import all the things
import * as animalFarm from 'animalFarm';

animalFarm.boxer.speak();

modules: Default exports

// --- helpers.js --- //

// Default exports

var helpers = {
    generateRandom: function() {
        return Math.random();    
    },
    sum: function(a, b) {
        return a + b;
    }
};

export default helpers;


// --- main.js --- //

import helpers from 'helpers';

Blocks: Example

// ES5

(function () {
    var secret = 'Soylent green is people!';
}());

console.log(secret); // Reference Error


// ES6

{
    let secret = 'Bush faked the moon landing';
}

console.log(secret); // Reference Error

Quiz time!

Add up n'th character

then reverse

(of first names)

2

4

3

1

Quiz time!

Add up n'th character

then reverse

(of first names)

2

4

3

1

hal

Quiz time!

ABBA

hal

donald

2

4

3

jeb

bonnie

1

Enhanced Objects: Example

// ES5
var person = {
    name: 'Doyle',
    poke: function() { console.log('Stop that!'); },
    greet: function() { console.log('Ahoi-hoi!'); }
};

// ES6
var person = {
    name: 'Doyle',
    poke() { console.log('Stop that!'); },
    greet() { console.log('Ahoi-hoi!'); }
};

Enhanced Objects: Example

// Computed property names (ES6)
const prefix = 'half';
const people = {
    [prefix + 'man']: 'Tyrion',
    [prefix + 'hand']: 'Qhorin',
    [prefix + 'mast']: true
};

console.log(people.halfman);    // → Tyrion
console.log(people.halfhand);   // → Qhorin
console.log(people.halfmast);   // → true

Rest Parameters: Example

Spread operator: Example

A better apply

Promises: Example

// ES5
func1(function (value1) {
    func2(value1, function (value2) {
        func3(value2, function (value3) {
            func4(value3, function (value4) {
                // Do something with value 4
            });
        });
    });
});

// ES6
func1(value1)
    .then(func2)
    .then(func3)
    .then(func4, value4 => {
        // Do something with value 4
    });

Promises: Syntax

// Promise creation 
promise = new Promise(function(resolve, reject) {});

• The promise constructor takes one argument, a callback with two parameters, resolve and reject.

• Running new Promise will immediately call the function passed in as an argument.  

Promises: Creating a new promise

const promise = new Promise(
    function (resolve, reject) {
        
        // Do something async here!
        setTimeout(() => resolve({name: 'Bård'}), 2000)
        
        // Or, with ES5 syntax:
        setTimeout( function(){
            return resolve({name: 'Bård'})
        }, 2000)
    }
);

Promises: Executing

getName.then(function(user) {
    // process result
    console.log(user.name)
    
}, function(err) {
    // handle error
    console.log('error! error!')
});

Promises: .then()

// Basic usage
.then(successFn, errorFn)

// Chaining
getSomeData()
    .then(filterTheData)
    .then(processTheData)
    .then(displayTheData);

Promises: Promise.all()

// Syntax
Promise.all(promiseArray).then(function(resultsArray) {
    //...
});

// Example:
Promise.all([
    queryUserToken(),
    queryUserDetails()
]).then(function() {
    renderProfiles();
});

Promises: Error catching

// Error catching
getSomeData()
    .then(doSomething)
    .then(doSomethingElse)
    .catch(function(err) {
        // handle all errors
    });

Object.assign: Example

// Syntax
Object.assign(targetObj, source, source2, source3);

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const newObj = Object.assign(o1, o2, o3);
console.log(newObj); // { a: 1, b: 2, c: 3 }

Object.assign: Example 2

function UIModal(userOptions) {

    const DOM;
    const defaults = {
        modal: '.js-modal',
        openBtn: '.js-modal-btn',
        closeBtn: '.js-modal-close-btn',
        overlay: '.js-modal-overlay',
        showOverlay: true
    };

    // Combine defaults with passed in options
    const settings = Object.assign(defaults, userOptions);
    
    // ...
}

Quiz time!

What is this?

Quiz time!

for-of: Example

// ES5
var sum1 = 0;
var arr1 = [1, 2, 3];

for (var index in arr1) {
    sum += arr1[index]; 
}

// ES6
let sum2 = 0;
let arr2 = [1, 2, 3];

for (let value of arr2) {
    sum += value;
}

for-of: Example

// Strings
let iterable = "Jammie Dodgers";

for (let value of iterable) {
    console.log(value);
}

// J
// a
// m
// m
// i
// e
//  
// D
// o
// d
// g
// e
// r
// s

Strings: string.includes()

// ES5
console.log('devSouthCoast'.indexOf('Coast') > -1); 
// true


// ES6
console.log('ryanGoslin'.includes('Goblin')); 
// false

Strings: string.repeat()

// ES5
function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
            strings.push(string);
    }
    return strings.join('');
}

repeat('chill', 3); // 'chillchillchill'


// ES6
'go'.repeat(3); // 'gogogo'  

Classes: Example

// Basic syntax     
class className  {
    
    // Constructor
    constructor() {}
    
    // Method
    methodName(){}
    
    // Super call
    super.superMethod();
}

Classes: ES5

// ES5
function Person(name, age, species) {
    this.name = name;
    this.age = age;
    this.species = species;
}

Person.prototype.greet = function () {
    return 'Greetings, I am ' + this.name + '!';
};

var cindy = new Person('Cindy', 98, 'klingon');
console.log(cindy.greet()); // Greetings, I am Cindy!

Classes: ES6

// ES5
class Person {
    constructor(name, age, species) {
        this.name = name;
        this.age = age;
        this.species = species;
    }

    greet() {
        return 'Greetings, I am ' + this.name + '!';
    }
}

const cindy = new Person('Cindy', 98, 'klingon');
console.log(cindy.greet()); // Greetings, I am Cindy!

Array.prototype.includes

// Example
['a', 'b', 'c'].includes('a'); // true

['a', 'b', 'c'].includes('d'); // false


// Almost the same Async
['a', 'b', 'c'].indexOf('a') >= 0

// But not quite
[NaN].includes(NaN) // true
[NaN].indexOf(NaN)  // -1

Exponentiation Operator 

// ES5
Math.pow(x, y);

// ES6
x ** y;

// Example
const twoTimesTwo = 2 ** 2; // 4
const fourTimesFourTimesFour = 4 ** 3; // 64

Async Await: The problem

// Async function
function getStarship() {
    return fetch('URL').then( response => {
        return response.json().name;
    })
}

// Sync function
function printStarship() {
    const starship = getStarship();
    console.log(starship);
}

printStarship(); // undefined

Async Await: The solution

// Async function
function getStarship() {
    return fetch('URL').then( response => {
        return response.json().name;
    })
}

// Async await function
async function printStarship() {
    const starship = await getStarship();
    console.log(starship);
}

printStarship(); // Death Star

Promises vs Async Await

// Promise
function getDailyJoke() {
    fetch('http://joke.org', {}).then(function(response) {
        return response.body.joke;
    });
}

// Async await
async function getDailyJoke() {
    let response = await fetch('http://joke.org', {});
    return response.body.joke;
}