Advanced JavaScript

Front-end Bootcamp

Created by Kostas Minaidis | Dec 2018

Agenta

  • Handling Asynchronous code with Async/Await
  • ES6: Classes
  • ES6: Template Literals
  • ES6: Arrow Functions
  • ES6: Default Function Parameters
  • ES6: Spread Operator & Destructuring Assignments

Handling Asynchronous Operations using

Async / Await

Asynchronous Functions
async function connect(){ ... }

An async(hronous) function operates asynchronously, using an implicit Promise to return its result.

The syntax and structure is much more like using standard synchronous functions.

Open your console and compare the result of the following commands:

      function normal(){ return 42; }
async function normal(){ return 42; }
The await keyword
async function connect(){
    const result = await promiseCommand();
}

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

Remember, the await keyword is only valid inside async functions.

CodePen
Practice makes perfect...
Warming up...
CodePen Exercise #1
CodePen Exercise #2

Example:

Hands-on: Bitcoin Wallet
https://bit.ly/2No4jlx

ES6 Classes

Syntactic Sugar for Prototypal Inheritance

MDN ES6 Classes

Time for a CodePen:

https://bit.ly/2Rl0PU6

ES6 Template Literals

ES6 Arrow Functions

JavaScript.info: Arrow Functions
JavaScript.info: Arrow Functions Revisited
CodePen Time!
https://bit.ly/2zIZxLF

ES6: Default Parameters

Default Parameters in ES5?

function run( arg1, arg2 ){
    if ( typeof arg1 === "undefined" ){
        arg1 = "default value #1";
    }
    if ( typeof arg2 === "undefined" ){
        arg2 = "default value #2";
    }

    console.log( arg1, arg2 );
}

run();
run( 1 );
run( 1, 2 );

Default Parameters in ES6!

function run( arg1 = "default #1", arg2 = "default #2" ){
    console.log( arg1, arg2 );
}

run();
run( 1 );
run( 1, 2 );
Quick Practice...

ES6 Object Destructuring

Destructuring allows you to pull out data from arrays
and objects into distinct variables with concise syntax.

Destructuring Objects 

const address = {
    street: 'Street',
    city: 'Athens',
    country: 'Greece'
}

const street = address.street;
const city = address.city;
const country = address.country;

Destructuring Objects 

const address = {
    street: 'Street',
    city: 'Athens',
    country: 'Greece'
}

const { street, city, country } = address;

Destructuring Objects 

const address = {
    street: 'Street',
    city: 'Athens',
    country: 'Greece'
}
const { street } = address;
const { city: town } = address;

Destructuring Objects

Before...
function doStuff( one, two, options ) {
    console.log( options.a, options.b, options.c );
}

doStuff( 'example1', 'example2', {
    a: 'opt1',
    b: 'opt2',
    c: 'opt3'
});

Destructuring Objects 

function doStuff( one, two, { a, b, c } ) {
    console.log( a, b, c );
}

doStuff( 'example1', 'example2', {
    a: 'opt1',
    b: 'opt2',
    c: 'opt3'
});

With default parameters:

function doStuff( one, two, { a = 'opt1', b = 'opt2', c = 'opt3' } = {} ) {
    console.log( a, b, c );
}

doStuff( 'example1', 'example2' );

Array Destructuring

let colors = [ 255, 100, 55 ];
let [ red, green, blue ] = colors;

With default values:

let colors = [ 255, 100 ];
let [ red = 99, green = 99, blue = 99 ] = colors;

Value Swapping

let colorA = "Black";
let colorB = "White";
[ colorA, colorB ] = [ colorB, colorA ];


colorA; // "White"
colorB; // "Black"

Practice

CodePen

More Exercises!

ES6 Spread Operator (Arrays)

const first = [ 1, 2, 3 ];
const second = [ 4, 5, 6 ];
const combined = first.concat( second );
// [ 1, 2, 3, 4, 5, 6 ]

const combined = [ ...first, ...second ];
// [ 1, 2, 3, 4, 5, 6 ]

const combined = [ ...first, 'middle', ...second, 'end' ];
// [ 1, 2, 3, 'middle', 4, 5, 6, 'end' ]

const clone = [ ...first ];

Spread Operator (Objects)

const first = { name: "Kostas" };
const second = { job: "Instructor" };

const combined = { ...first, ...second, location: "Greece" };

console.log( combined );
// { name: "Kostas", job: "Instructor", location: "Greece" }

const clone = { ...first };

Practice

CodePen

Resources: