Advanced JavaScript Workshop

Advanced JavaScript Workshop

JavaScript. So you have learned about loops, arrays and objects, what is the next thing to learn? Take your JavaScript skills to the next level by learning about recursion, inheritance and prototype chain. We will also cover the new features in JavaScript that were introduced in ES7 and ES8 so you can keep your JavaScript skills current.

These slides are from a 3 hour workshop that I taught for Women Who Code Atlanta.

Da526e4b5901b3a2759cf234285c6488?s=128

Jennifer Bland

March 31, 2018
Tweet

Transcript

  1. Advanced JavaScript Workshop Jennifer Bland wifi: The Creative Circus pass:

    madhatter
  2. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Housekeeping • You must have node.js installed - https://nodejs.org • You must have a text editor installed • Clone repo from GitHub https://github.com/ratracegrad/advanced-javascript-workshop
  3. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland What We Will Cover • What is new in EcmaScript 2016 • What is new in EcmaScript 2017 • Recursion • Inheritance • PrototypeChain
  4. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland EcmaScript • What is it • When are updates created to the language • Version numbering
  5. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland EcmaScript 2016 • Array.prototype.includes() • Exponent operator
  6. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Array.prototype.includes() • Checks the array for the value passed as an argument • returns true or false • Replaces Array.prototype.indexOf()
  7. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland
  8. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Example
  9. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Classwork 1 • Find out if Array.prototype.includes() works with just numbers or will it work with strings?
  10. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Classwork 2 • How does Array.prototype.includes() handle NaN compared to indexOf?
  11. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Exponent Operator • Adds a new arithmetic operator - ** • Same purpose as Math.pow()
  12. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Math.pow()
  13. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Example
  14. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland EcmaScript 2017 • Async Functions • Object methods - .values() and .entries() • String padding • Recursion • Inheritance and the prototype chain
  15. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Object.values() • Objects are make up of key-value pairs • Object.keys() was already available to us • Access all the values of an object • Returns values in an array
  16. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Object.values() • Example
  17. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Object.entries() • This combines both the key and value into an array
  18. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Example
  19. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Classwork
  20. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland String Padding • Two new method added to String prototype • padStart - ‘string’.padStart(targetLength, padString) • padEnd - ‘string’.padEnd(targetLength, padString)
  21. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Classwork
  22. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Object.getOwnPropertyDescriptors() • Returns all own (non-inherited) property descriptors of an object • Attributes of the return object can be: • value • writable • get • set
  23. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Example
  24. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Async Functions • Async and Await • Async functions always return a promise • Await keyword may only be used in functions with the async keyword • non blocking code
  25. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Example • Example
  26. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Recursion • A recursive function is one that calls itself repeatedly until it arrives at a result • Most loops can be written in a recursive style
  27. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland
  28. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Recursion function factorial(x) { // TERMINATION // BASE // RECURSION }
  29. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Recursion function factorial(x) { // TERMINATION // BASE // RECURSION }
  30. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Inheritance and Prototype Chain • JavaScript is a prototype-based language • Every object has an internal property called Prototype • let x = {}; • Object.getPrototypeOf(x);
  31. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Inheritance and Prototype Chain When you attempt to access a property or method of an object, JavaScript will first search on the object itself, and if it is not found it will search the object’s Prototype. If after searching both the object and its Prototype and still not match is found. JavaScript will check the prototype of the linked object, and continue searching until the end of the prototype chain is reached. At the end of the prototype chain is Object.prototype. All objects inherit the properties and methods of Object. Any attempt to search beyond the end of the chain results in null.
  32. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Inheritance and Prototype Chain Inheritance refers to an object’s ability to access methods and other properties from another object. Objects can inherit things from other objects. Inheritance in JavaScript works through something called prototypes
  33. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Inheritance and Prototype Chain In JavaScript, all functions are also objects, which means that they can have properties. All functions have a property called ‘prototype’, which is also an object. function foo() {}; typeof foo.prototype
  34. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Constructors In JavaScript, there is really no difference between a “regular” function and a “constructor” function. They are actually the same. As a convention, functions that are meant to be used as constructors are generally capitalized.
  35. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Constructors
  36. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Differential Inheritance JavaScript uses an inheritance model called “differential inheritance”. Methods are not copied from parent to child. Instead children have an “invisible link” back to their parent object. For example, fido does not actually have its own method called bark() fido.hasOwnProperty(‘bark’)
  37. Advanced JavaScript Workshop ------ Women Who Code Atlanta ------ Jennifer

    Bland Prototype Chain What actually happens when I write fido.bark() is this: 1. JavaScript looks for a property called bark on our fido object 2. It doesn’t find one so it looks “up the prototype chain” to fido’s parent which is Dog.prototype 3. It finds Dog.prototype.bark and calls it with ‘this’ bound to fido