Today's Topics

1. Review at-home challenges from previous class
2. Promises
3. Fetch
4. The Fetch Helper
5. Generator Functions
6. Iterables
7. Sets and Maps
8. Classes
9. Encapsulating Code with Modules
10. Transpiling Setup
11. Additional Resources

Promises

Problems with Asynchronous Requests

The Ideal Scenario

Three Promise States

Creating a Promise

• You'll need:
  1. The Promise object, which accepts a callback function (called the executor) with resolve and reject arguments
  2. resolve() and reject() are invoked depending on certain conditions
  3. then() and catch()blocks attached to the Promise object

const promise = new Promise((resolve, reject) => {

});







                

const promise = new Promise((resolve, reject) => {

});

promise.then(() => {
  console.log('my resolution message');
});



                

const promise = new Promise((resolve, reject) => {

});

promise.then(() => {
  console.log('my resolution message');
});

promise.catch(() => {
  console.log('my rejection message');
});

const promise = new Promise((resolve, reject) => {
  resolve(); // outputs 'my resolution message'
});

promise.then(() => {
  console.log('my resolution message');
});

promise.catch(() => {
  console.log('my rejection message');
});

const promise = new Promise((resolve, reject) => {
  reject(); // outputs 'my rejection message'
});

promise.then(() => {
  console.log('my resolution message');
});

promise.catch(() => {
  console.log('my rejection message');
});

const promise = new Promise((resolve, reject) => {
  resolve(5); // chain callbacks and pass info between them
})
  .then((value) => {
    console.log(value); // 5
  })
  .catch(() => {
    console.log('my rejection message');
  });

                

Always include a rejection handler! Otherwise your promise may silently fail.

Grouping Multiple Promises

Combine promises in an iterable, such as an array

1. Promise.all() waits for all promises in the group to fulfill
2. Promise.race() is fulfilled when the fastest promise in the group is fulfilled

Promise.all()

The returned promise is fulfilled when all promises in the iterable are fulfilled

Returns an array of result values

If any of the promises in the array fail, the returned promise fails too

Promise.race()

Instead of waiting for all promises to be fulfilled like in Promise.all(), a promise using Promise.race() is fulfilled as soon as any promise in the array is fulfilled

Promise-Based HTTP Requests

function request(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function() {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

request('http://json.com'); // returns a promise

Fetch

Fetch

The fetch() helper returns a promise and is used for HTTP requests

The initial return value is the Response object; use chaining and the .json() method to get the JSON you need

fetch('http://json.com')
      .then(serverResponse => serverResponse.json())
      .then(json => console.log(json))
      .catch(err => console.log(err));

Generator Functions

When might you use a generator function?

When there's a distinct transition, e.g. when you're awaiting a response from an external service

When you need to save your place within a function and get back to that specific place later

When you need to pause execution while you get data elsewhere or run some other code

What is it?

Say we want to run some errands at three stores: the grocery store, hardware store, and a cafe. Each time we enter a store, we'll spend time retrieving items.

Each time we visit a store, time passes until we yield some items, then pick up where we left off in our shopping trip

Making a generator function

• A generator function returns an iterator
• Generator functions look like regular functions, but have an asterisks (*) between function and its name:

                function *createIterator() {
  // generator function body here
}

// generator functions are called like regular functions but return an iterator
const iterator = createIterator();
            

Yielding and Pausing

• Within the generator function, the yield keyword specifies the value to be returned with each iteration

function *createIterator() {
  yield 30;
  yield 31;
  yield 32;
}

• To return the next yield value, call yourIterator.next() to return an object formatted like { value: yieldValue, done: trueOrFalse}

function *createIterator() {
  yield 30;
  yield 31;
  yield 32;
}

const iterator = createIterator();
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: 31, done: false }
console.log(iterator.next()); // { value: 32, done: false }

// subsequent calls
console.log(iterator.next()); // { value: undefined, done: true }

Why generator functions?

1. Can be entered and exited multiple times
   • Pause in the middle, one or many times, and resume later, allowing other code to run during pauses
2. Pairs well with asynchronous operations
   • Turn asynchronous code into more logical synchronous-looking code
   • Cancel asynchronous operations

Preventing callback hell

function copyFile (source, dest, callback) {
  fs.exists(source, function (exists) {
    if (!exists) return callback('Source does not exist')
    fs.exists(dest, function (exists) {
      if (exists) return callback('Dest already exists')
      fs.readFile(source, function (err, data) {
        if (err) return callback(err)
        fs.writeFile(dest, data, function (err) {
          return callback(err)
        })
      })
    })
  })
}

const copyFile = watt(function *(source, dest, next) {
  if (!(yield fs.exists(source, next.arg(0)))) throw 'Source does not exist'
  if (yield fs.exists(dest, next.arg(0))) throw 'Dest already exists'
  var data = yield fs.readFile(source, next)
  yield fs.writeFile(dest, data, next)
})

Generator Functions (v5 in Plunkr): A Visual

Iterables

Creating Iterables

By default, objects you create are not iterable

Make them iterable with a [Symbol.iterator] property containing a generator function and for-of loop:

const team = {
  members: ['Sam', 'Tam', 'Lam'],
  [Symbol.iterator]: function *(){
    for (let member of this.members) {
      yield member;
    }
  }
};

Use concise object methods to trim it down further:

const team = {
  members: ['Sam', 'Tam', 'Lam'],
  *[Symbol.iterator](){
    for (let member of this.members) {
      yield member;
    }
  }
};

When would we use iterables?

Parent and child nodes

Let's take a look »

View Solution »

Iterables and Trees

Sets and Maps

Sets and Maps

Set: An ordered list of unique values. Allows fast access to the data it contains.

const set = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log(set.size); // 5

set.add(6);
console.log(set.size); // 6
            

Map: An ordered list of key-value pairs, where the key and value can be any type.

const map = new Map();
map.set('title', 'JS206: Intro to ES6');
map.set('group', 'GDI');

console.log(map.get('title')); // JS206: Intro to ES6
console.log(map.get('group')); // GDI

Built-In Iterators

• keys() returns an iterator whose values are the keys contained in the collection
• entries() returns an iterator whose values are key-value pairs
• values() returns an iterator whose values are the values of the collection

Classes

Classes

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.logType = function() {
  console.log(this.type);
};

var car = new Vehicle('car');
car.logType(); // 'car'

console.log(car instanceof Vehicle); // true
console.log(car instanceof Object); // true

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  logType() {
    console.log(this.type);
  }
}
const car = new Vehicle('car');
car.logType(); // 'car'

console.log(car instanceof Vehicle); // true
console.log(car instanceof Object); // true

You don't need commas between the elements of a class

Derived Classes

Derived classes: Classes that inherit from other classes

Within the derived class's class {} definition, use the extends keyword to specify the base class. Then access the base class constructor by calling super().

class Rectangle {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }

  getArea() {
    return this.length * this.width;
  }
}

class Square extends Rectangle {
  constructor(length) {
    super(length, length); // calls the base class constructor
  }
}

const square = new Square(5);
console.log(square.getArea()); // 25

Encapsulating Code with Modules

Modules

JavaScript has an error-prone share everything approach to loading code

Modules are individual files that package and encapsulate individual pieces of functionality (variables, functions, and classes)

Export and import only the bindings you need rather than everything in a file

🌟 No more global scope pollution!

Exporting

• Use the export keyword before elements you'd like to expose in a file

// myExports.js

// export variables
export let description = 'GDI Fan';
export const threshold = 7;

// export functions
export function multiply(a, b) {
  return a * b;
}

// export classes
export class Rectangle {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }
}

// private to the module
function sum(a, b) {
  return a + b;
}

Importing

• Access the functionality in another module by using the import keyword
• Each import statement requires:
  1. the functionality you're importing
  2. the module name (typically the file name)
• Always place import statements at the top of a file

// index.js

import { Rectangle, description, multiply } from './myExports.js';

const shape = new Rectangle(6, 8);
console.log(description); // 'GDI Fan'
console.log(multiply(3, 5)); // 15

Transpiling Setup

Additional Resources

Additional Resources

Thank you all!