Rapid ES6 Training

rapid_es6_training_summary.md

Rapid ES6 Training

An ES6 compatibility chart: kangax.github.io/compat_table/es6

New ES6 Syntax

let, const, and block scoping

• let: Not hoisting, we make sure the variable exist before using it
• Block scoping: We can redefine a variable within a block and that variable wil dissapear outside the block
• const: When we use the const keyword to define a variable we MUST initialize it

With letand const anything declared inside the block, STAYS in the block

Arrow functions ->

The real purpose of arrow functions is to handle the this keyword.

• ES5: On events this get set to the element that receives the event
• ES6: On events this refers to the context of the code run

() -> {}

• With 1 argument we can avoid parenthesis arg -> {}
• return keyword is mandatory when using a block

Object literal

var obj = {
  name: 'value',          // Variables
  another_name: function() {}  // Functions

• ES5: In object literals with the function keyword, this is set to the object in which the function is called
• ES6: In object literals with arrow functions this is set to the context where the code was

You can't bind a new object to an arrow function

We are not going to be able to change the value of this thus call, bind, and apply are useless

We do not have access to the prototype field in arrow functions

When declaring default parameters we have access to variables within the scope

It is not a good practice the use of arguments

Rest and Spread ...

Rest: Refers to gathering up parameters and putting them all into a single array

                            // Rest 
const myFunc = (p1, p2, ...categories) -> {}

Spread: Refers to splitting out the elements of an array or even a string

• Takes an array and converts it into a list of params (opposite of Rest)
• It splits a string into its individual characters

JS allows tailing commas `[1, 2, 3,]

Object Literal Extensions

Within object literals

{               //                {
  price: price  //<--equals-->      price
}               //                }

We no longer need to specify the function keyword

{
  calculateVal() {}
}

We can use a variable name as a field name using brackets, we can put an entire expression within brackets

{
  var p1 = {['hi' + 'val']: 'test'}
}

for ... of loops

Loops through each item in the array

var category = ['hair', 'soft', 'vapor'];
for (let item of categories) {
  console.log(item)
}

Template Literals

Invoice Number: ${testVar}

• By scaping the $ with \$ no interpolation takes place
• New lines are spaces are respected

Destructuring

let salary = ['32', '500', '75'];
let [low, high, average] = salary

• We can pull nested values
• We can add defaults
• We can skip elements by adding an extra comma
• We can destruct in function params
• We use {} to destruct objects
• We need to make sure property names match variable names when destructuring objects
• Requires an enumerator