An ES6 compatibility chart: kangax.github.io/compat_table/es6
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 theconst
keyword to define a variable we MUST initialize it
With
let
andconst
anything declared inside the block, STAYS in the block
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
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
thuscall
,bind
, andapply
are uselessWe 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: 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,]
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'}
}
Loops through each item in the array
var category = ['hair', 'soft', 'vapor'];
for (let item of categories) {
console.log(item)
}
Invoice Number: ${testVar}
- By scaping the
$
with\$
no interpolation takes place - New lines are spaces are respected
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