Successfully reported this slideshow.

Workshop JavaScript ES6+

1

Share

Loading in …3
×
1 of 21
1 of 21

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Workshop JavaScript ES6+

  1. 1. Intro to Javascript ES6/7/8 WeWork Amsterdam 21/06/2018
  2. 2. Roy Derks Technical Founder & CTO, SwitchBay @gethackteam #javascriptEverywhere
  3. 3. What is ES? ES is short for ECMAScript “ECMAScript is a standard.” “ECMAScript is standardised JavaScript.” “JavaScript is a dialect of ECMAScript.”
  4. 4. How does the Versioning work? Released in 2015 ES6 = ECMAScript 6 The 6th version of ECMAScript ES2015 = ? ? = ECMAScript 2016 ES8 = ?
  5. 5. 2015? Why is ES6 still “new”? “Depends on how (or where) you use JavaScript.” Short: Browser Support
  6. 6. Also on CodePen http://bit.ly/es678workshop
  7. 7. Also on CodePen
  8. 8. Contents of this Workshop • Importing Modules • Arrow Functions • Spread / Rest Operators • Classes • Let & Constants • Template Literals • Object Literals • Destructuring
  9. 9. Let & Constants var = XX let = XX const = XX // “immutatable variable” http://bit.ly/es678workshop-1
  10. 10. Template Literals var sayHi = 'Hi, my name is ' + variable http://bit.ly/es678workshop-2 const sayHi = `Hi, my name is ${variable}`
  11. 11. Object Literals http://bit.ly/es678workshop-3 Quickly create objects with properties inside curly braces • Short Syntax for Initialising Properties • Short Syntax for Defining Functions • Computed Names for Properties
  12. 12. Destructuring http://bit.ly/es678workshop-4 const { a, b, c } = alphabet var a = alphabet.a, b = alphabet.b, …
  13. 13. Arrow Functions http://bit.ly/es678workshop-5 const doThis = (variable) => { … } function doThis(variable) { return … }
  14. 14. Spread Operator http://bit.ly/es678workshop-6 Combine or Spread elements into collections (Arrays and Objects) const params = [‘param2’, ‘param3’] const combined = [ ‘param1’, …params ]
  15. 15. Rest Parameter http://bit.ly/es678workshop-7 Combine remaining parameters into one single parameter const doThis = (param1, …params) => { … }
  16. 16. Classes http://bit.ly/es678workshop-8 class A { constructor() { … } doThis = () => { …} } Easily create Classes with Inheritance class B extends A { doThis() { …} }
  17. 17. Iterables / Iterators http://bit.ly/es678workshop-9 const iterable { [Symbol.iterator](): iterator { …} } next() { value: …, done: true | false }
  18. 18. Remember? Callback Hell http://callbackhell.com/ doThis(param, function(err, res) { doThis(param, function(err, res) { doThis(param, function(err, res) { // Do Something… }) }) }) })
  19. 19. Solution? Promises new Promise(resolve => { doThis(param).then(a => { doThis(param).then(b => { // Do Something… }) }) }) })
  20. 20. Async / Await http://bit.ly/es678workshop-10 async function doThis() { const waitForThis = await alsoDoThis() return waitForThis } From “Callback Hell” to Promises to Asynchronous
  21. 21. Want to know more? http://es6-features.org @gethackteam #javascriptEverywhere

Editor's Notes

  • ECMAScript is a 100+ page trademarked specification of how JavaScript should (or could) be used. It’s like QWERTY is for keyboards, although you could use AZERTY..
  • Question: How would ES7 be called? How would ES8 be called?
  • Question: Who of you uses JavaScript on the Frontend? Backend? Both?

    IE11 still doesn’t support ES6 (without compiler)
  • http://bit.ly/es678workshop-1

    Also known as "immutable variables" → cannot be re-assigned new content, although the assigned content can be changed. Generally const is used as replacement for var, use let if you want to have the same effects as var.

    Show that changing the value of ‘variable’ replaces the initial value, while changing the value of ‘constant’ does nothing. However, the assigned content ‘key’ of ‘constant’ can be changed.
    → Show let as a replacer of var
  • http://bit.ly/es678workshop-2

    Sometimes also called “template strings”
    So we replaced var with const for now.
  • http://bit.ly/es678workshop-3

    Object literals make it easy to quickly create objects with properties inside the curly braces. To create an object, we simply notate a list of key: value pairs delimited by comma. ES6 makes the declaring of object literals concise and thus easier.

    Three major ways it does this are :
    - Shorthand Syntax for initialising Properties Show we can leave out the property name
    - Shorthand Syntax for defining Functions Show we can leave out the definition of the function
    - Computed Names for Properties Show we can use a variable as property name, but can lead to overwriting the name if used twice. So ‘Bond’ will overwrite ‘James → Add count
  • http://bit.ly/es678workshop-4

    With ES6 it becomes easier to destructure Arrays and Objects, also within Functions. Show how we can more easily destruct Arrays, Objects (incl. renaming) and apply these methods to functions.

    You can even do this for multi-level objects!!
  • http://bit.ly/es678workshop-5

    Cleaner syntax for writing functions

    Show how we can use an Arrow Function for a simple .map() over an Array of numbers (also use new function from ES6 to more easy create an Array of numbers). Hint: Remember the function we used before to get a Person? We can also write it as a Constant using Arrow Functions.
  • http://bit.ly/es678workshop-6

    Spread combine arrays and objects into one, show that for combining objects the keys should have unique names.
  • http://bit.ly/es678workshop-7

    Combine remaining parameters into one single parameter
    Reuse previous function to show parameters can be combined.
  • http://bit.ly/es678workshop-8

    Writing Classes in ES5 was a real trouble and had no real support (insert code snippet example). ES6 supports a more intuitive OOP-style with Class Inheritance

    Fat Arrow Functions don’t work in SubClasses!!!!!!

    Show how we can convert a function to a Class and even extend it. Also show Spread Operators.
  • http://bit.ly/es678workshop-9

    An interable must be an object with a function iterator whose key is 

    An iterator must be an object with a function named next that returns an object with the keys: value — the current item in the iteration; and done— true if the iteration has finished, false otherwise.

    We can also build own iterables -> An object becomes an iterable if it implements a function whose key is Symbol.iterator and returns an iterator.
  • Callbacks: Execute function once asynchronous call returns value. Program doesn’t have to halt and wait for value.

    Every function has its own Error handling
  • Promises: Alleviate “callback hell”

    A pending promise can either be fulfilled or rejected, at which point the appropriate handler is called via .then() for successes and .catch() for errors.
    The main thing to keep in mind: A promise represents the eventual result of an asynchronous operation.

    Allows you to write code that assumes a value is returned within a success function
    Only needs a single error handler
  • http://bit.ly/es678workshop-10
    Async/Await —> Introduced in ES2017. Allows people to write async code as if it were synchronous

    AWAIT -> This will pause the async function and wait for the Promise to resolve prior to moving on.
  • ×