Workshop JavaScript ES6+

Editor's Notes

• #4 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..
• #5 Question: How would ES7 be called? How would ES8 be called?
• #6 Question: Who of you uses JavaScript on the Frontend? Backend? Both? IE11 still doesn’t support ES6 (without compiler)
• #10 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
• #11 http://bit.ly/es678workshop-2 Sometimes also called “template strings” So we replaced var with const for now.
• #12 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
• #13 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!!
• #14 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.
• #15 http://bit.ly/es678workshop-6 Spread combine arrays and objects into one, show that for combining objects the keys should have unique names.
• #16 http://bit.ly/es678workshop-7 Combine remaining parameters into one single parameter Reuse previous function to show parameters can be combined.
• #17 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.
• #18 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.
• #19 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
• #20 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
• #21 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.