Advanced JavaScript Workshop Jennifer Bland wifi: The Creative Circus pass: madhatter

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

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

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

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

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()

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

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

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?

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

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

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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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);

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.

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

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

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.

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

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’)

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