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.

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