Section 17: ES2015 Part II

Question 1

class keyword

Answer 1

• creates a constant that can’t be redeclared
• An abstraction of constructor functions and prototypes.
• Class keyword does not hoist, so declare them at the top.
• Still use ‘new’ keyword to create objects

Question 2

class example

Answer 2

class Student {
   constructor(firstName, lastName){
       this.firstName = firstName;
       this.lastName = lastName;
    }
}

var elie = new Student(‘Elie’, ‘Schoppik’);

Question 3

Where and how do you place prototype methods with the ‘class’ keyword?

Answer 3

class Student {
   constructor(firstName, lastName){
       this.firstName = firstName;
       this.lastName = lastName;
    }
    sayHello() {
            return `Hello ${this.firstName} ${this.lastName}`;
     }
}

** This is placing the method on the prototype and only creating it once for each of the instances. Anything you put inside of the constructor will be created again for each instance.

Question 4

What is a static method and how do you declare one?

Answer 4

*The static keyword defines a static method for a class. Static methods aren’t called on instances of the class. Instead, they’re called on the class itself. These are often utility functions, such as functions to create or clone objects.

Example:

class Student {
   constructor(firstName, lastName){
       this.firstName = firstName;
       this.lastName = lastName;
    }
    sayHello() {
            return `Hello ${this.firstName} ${this.lastName}`;
    }
    static isStudent (obj) {
           return obj.constructor === Student;
    }
}

Question 5

Inheritance

Answer 5

• Passing along methods and properties from one class to another.

Question 6

‘extends’ keyword

Answer 6

*helps include one class inside of another with no additional code necessary.

class Person {
   constructor(firstName, lastName){
       this.firstName = firstName; 
       this.lastName = lastName; 
   }
   sayHello() {
        return `Hello $(this.firstName) $(this.lastName)`;
        }
}

class Student extends Person {

}

Question 7

super keyword

Answer 7

class Person {
   constructor(firstName, lastName){
       this.firstName = firstName; 
       this.lastName = lastName; 
   }
   sayHello() {
        return `Hello $(this.firstName) $(this.lastName)`;
        }
}

class Student extends Person {
       constructor(firstName, lastName){
              super(firstName, lastName);
       }
}

** super can only be used if there is a method by the same name in the parent class.

Question 8

maps or “hash maps”

Answer 8

Similar to objects, except the keys can be any data type.

Create by using new keyword.

Example: 
var firstMap = new Map;
firstMap.set(1, 'Elie');
firstMap.set(false, 'a boolean');
firstMap.set('nice', 'a string');
firstMap.delete('nice'); //true
firstMap.size // 2

*it comes with a forEach method:

myMap.forEach(v => console.log(v));

Question 9

Why would you use a map?

Answer 9

1. Finding the size is easy - no more loops or Object.keys()
2. They keys can be any data type!
3. No worring that you might overwrite keys on the Object.prototype.
4. Iterating over keys and values in a map is quite easy as well.

Question 10

When to use a map?

Answer 10

1. If you need to look up keys dynamically
2. If you need keys that are not strings
3. If you are frequently adding and removing key/value pairs.
4. Are key-value pairs frequently added or removed?
5. If you are operating on multiple keys at a time.

Question 11

sets

Answer 11

• All values in a set are unique
• Any type of value can exist in a set
• Created using the new keyword
• Exist in quite a few other languages

** You can implement a for … of loop with sets.

Question 12

how do you create a set?

Answer 12

var s = new Set;

var s2 = new Set([3,1,4,1,2,1,5]); // {3,1,4,2,5}

Question 13

What are some methods on set?

Answer 13

.has()
.delete()
.size

Question 14

Define a Promise

Answer 14

• A one time guaranteed return of some future value.
• When that value is figured out - the promise is resolved/fulfilled or rejected.
• Friendly way to refactor callback code.

Example:

function displayAtRandomTime(){
  return new Promise(function(resolve,reject){
     setTimeout(function(){
        if(Math.random() > .5)  {
              resolve('Yes!'); 
        } else {
              reject('no');
        }
    }, 1000);
 });
} 

displayAtRandomTime().then(function(value){
    console.log(value);
}).catch(function(error){
    console.log(error);
});

*not super common to use the native promise constructor. More common to use 3rd party ones, like jQuery.

Question 15

Promise.all

Answer 15

Accepts an array of promises and resolves all of them or rejects once a single one of the promises has been first rejected. (fail fast)

*the Promises don’t resolve sequentially but promise.all waits for them to resolve.

Question 16

Promise.all example

Answer 16

function getMovie(title) {
   return $.getJSON(`https://omdbapi.com?t=${title}&apikey=thewebd`);
}

var titanicPromise = getMovie('titanic');
var shrekPromise = getMovie('shrek');
var braveheartPromise = getMovie('braveheart');

Promise.all([titanicPromise, shrekPromise, braveheartPromise]).then(function(movies){
return movies.forEach(function(value){
console.log(value.Year);
});
});

Question 17

Generators

Answer 17

• A special kind of function which can pause execution and resume at any time
• Created using ‘*’
• When invoked, a generator object is returned to us with the keys of value and done.
• Value is what is returned from the paused function using the yield keyword
• Done is a boolean which returns true when the function has completed.

Question 18

Object.assign

Answer 18

Create copies of objects without the same reference

var o = {name: "Ellie"};
var o2 = Object.assign({}, o);

o2. name = “Tim”;
o. name; // “Elie”

**Not a deep clone.

Question 19

Array.from

Answer 19

convert other data types into arrays
//Example 1

var divs = document.getElementsByTagName("div");
var converted = Array.from(divs);

//Example 2

var firstSet = new Set([1,2,3,4,3,2,1]); // {1,2,3,4}
var arrayFromSet = Array.from(firstSet); //[1,2,3,4]

Question 20

find

Answer 20

• Invoked on arrays
• Accepts a callback with value, index and array
• Returns the value found or undefined if not found