Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jennifer Bland

March 31, 2018
Tweet

More Decks by Jennifer Bland

Other Decks in Technology

Transcript

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide