Section17-ES2015-Part-2

Section 17- ES2015 Part 2

Section slides

Notes:

• class Keyword

  Classes MDN Doc

  • A new reserved keyword provided by ES2015
  • The class keyword creates a constant - can not be redeclared
  • The class keyword is an abstraction of constructor functions and prototypes because Javascript does not have OOP
  • class does not hoist - declare classes at the top of the file
  • Still use the new keyword to create objects

  In ES5 here is how we create objects:

  

  • 1st create a constructor function
  • use new to create new objects

  ES2015 version:

  

  • use the class keyword instead of creating a function
  • inside, use a special method constructor which is run when new is used
  • use the new keyword to create objects
  • in ES5, shared methods are put in the constructor's prototype:

    

  • Instance Methods

    in ES2015 the methods are placed inside of the class, and it uses no function keyword, similar to object shorthand

    

  • Class methods

    ES5 Class Methods

    

    • Class methods are placed directly on the constructor function

    ES2015 Class Methods

    

    • Class methods are created using static keyword

• Inheritance

  Passing along methods and properties from one class to another

  ES5 Inheritance

  

  • Set the prototype property of a constructor to be an object created from another prototype property
  • Reset the constructor property on a constructor function

  ES2015 inheritance

  use the extends keyword

  

• super keyword

  ES5 Refactoring constructors

  

  • Notice the duplication in the Student constructor function!

  Use apply

  

  • Use call or apply in a constructor function - apply is handy when there are many arguments

  ES2015 Super

  

  • Super can only be used if a method by the same name is implemented in the parent class

• Maps

  Maps MDN doc

  What you should know about ES6 Maps - Hackernoon

  • Also called "hash maps" in other languages
  • Until ES2015 - objects were replacements for maps
  • Similar to objects, except the keys can be ANY data type!
  • Created using the new keyword

  Setting values

  
  

  Extracting values

  

  Easily iterate over maps

  

  Maps implement a Symbol.iterator w/c means we can use a for...of loop

  

  Accessing keys and values in map

  we can access everything with .entries() and destructuring!

  

  Why Use Maps?

  • Finding the size is easy - no more loops or Object.keys()
  • The keys can be any data type!
  • You can accidentally overwrite keys on the Object.prototype in an object you make - maps do not have that issue
  • Iterating over keys and values in a map is quite easy as well

  When to use Map

  • If you need to look up keys dynamically (they are not hard coded strings)
  • If you need keys that are not strings!
  • If you are frequently adding and removing key/value pairs
  • Are key-value pairs frequently added or removed?
  • If you are operating on multiple keys at a time

• WeakMap

  MDN Doc

  • Similar to a map, but all keys MUST be objects
  • Values in a WeakMap can be cleared from memory if there is no reference to them
  • More performant than maps, but can not be iterated over

• Sets

  MDN doc

  • 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, ES2015 finally brings them to JavaScript

  Syntax

  

• Weaksets

  MDN doc

  • Similar to a set, but all values MUST be objects
  • Values in a WeakSet can be cleared from memory if there is no reference to them
  • More performant than sets, but can not be iterated over

• Promises

  • 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
  • Libraries have implemented Promises for a while, ES2015 is a little late to the game

  Promise.all

  • 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).
  • If all of the passed-in promises fulfill, Promise.all is fulfilled with an array of the values from the passed-in promises, in the same order as the promises passed in.
  • You may have seen something like this when $.when in jQuery or Q
  • The promises don't resolve sequentially, but Promise.all waits for them

  

• Generators

  function* MDN doc

  Generator MDN doc

  Iterators and Generators MDN doc

  • A special kind of function which can pause execution and resume at any time
  • Created using a *
  • 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

  

  Yield Multiple Values

  We can place multiple yield keywords inside of a generator function to pause multiple times!

  

  Async Generators

  We can use generators to pause asynchronous code!

  

• Object.assign

  Create copies of objects without the same reference!

  

  Not a deep clone

  

  If we have objects inside of the object we are copying - those still have a reference!

• Array.from()

  Convert other data types into arrays

  How it was done in ES5

  

  ES2015 way:

  

• find

  • Invoked on arrays
  • Accepts a callback with value, index and array (just like forEach, map, filter, etc.)
  • Returns the value found or undefined if not found

  

  findIndex

  Similar to find, but returns an index or -1 if the value is not found

  

• includes

  returns a boolean if a value is in a string - easier than using indexOf

  

• Number.isFinite()

  A handy way for handling NaN being a typeof number