2. What and Why
ECMAScript 2015(ES6) is next level JavaScript
Clearer, more concise code
Browsers are currently implementing it
You can use it now with Babel.js
Works well with React.js
4. Major Features
Let, Const, and Arrow
Functions
Classes
Default, Rest, and Spread
Iterators, Generators, &
For…Of
Destructuring
Template Strings
Collections
6. Let
Introduces block scoping into JavaScript
You can usually replace var with it but be
careful with existing code.
You can use them instead of IIFE’s to preserve
your namespace.
7. Block Scoping
function foo() {
{
console.log(hello); //error, the variable is not defined
//code within curly braces is a "block"
//this is only available within this block
let hello = 1234;
}
console.log(hello); //output: Error, hello is not defined
for (let i = 0; i < 10; i++) {
//the variable ‘i’ is only available within the for block
}
console.log(i); //output: Error, i is not defined
}
8. Const
Constants are immutable variables.
Assigning a new value to it will cause an error
Careful: You can change the properties of an
object, as long as you don’t reassign the object
itself
9. Immutable
{
const foo = 1;
foo = 2; //error: cannot change the value of a constant
}{
const obj = { hello: 'world' };
obj.hello = 'galaxy'; //no error!
}{
const obj = { hello: 'world' };
obj = { hello: 'galaxy' }; //error
}{
const obj = { hello: 'world' };
Object.freeze(obj);
obj.hello = 'galaxy'; //this will now cause an error
}
27. Maps
Maps are like objects, except you can have objects as keys
Because they are separate, you can use Maps as key
value stores without worrying about all the baggage objects
bring
There’s no efficient way to see how many properties an
object has
Implements Iterable
28. Maps
var colorObject = {color: ‘blue’};
var myMap = new Map;
myMap.set(‘petsAllowed’, ‘for a fee’);
myMap.set(colorObject, 4);
myMap.get(colorObject); // 4
myMap.has(‘petsAllowed’); //true
myMap.size // 2;
myMap.delete(colorObject);
myMap[Symbol.iterator](); //returns an iterator
myMap.clear();
29. Sets
Sets are like arrays except they only contain
unique values
Optimized for membership testing
Sets are not indexed
Implements Iterable
30. Sets
var mySet = new Set;
mySet.add(4); //[4]
mySet.add(‘hello’); // [4, ‘hello’]
mySet.add(4); // [4, ‘hello’]
mySet.size; // 2
mySet.has(‘hello’); //true
mySet.delete(‘4’) //[‘hello’]
mySet[Symbol.iterator](); //returns an iterator
mySet.clear();
31. WeakMaps
Maps whose keys must be objects only
Does not implement iterable, so you can’t get a list of its
contents
Otherwise has all of the map methods
This is all so that your keys can be garbage collected.
Because they are objects, and if there are no other
references to them, they can be cleaned up
32. WeakSets
Sets of only objects
Does not implement iterable, so you can’t get a list of its
contents
Otherwise has all of the set methods
This is all so that your items can be garbage collected.
Because they are objects, and if there are no other
references to them, they can be cleaned up
34. Default, Rest, and
Spread
All function parameter tools
Default allows you to set a variable default in the
function declaration
Rest allows you to take one or more arguments
into an array parameter
Spread is the reverse. It lets you destructure an
array argument into the parameter variables
35. Default
function f(x, y=12) {
// y is 12 if not passed
// (or passed as undefined)
return x + y;
}
f(3) == 15
45. Iterators
An iterator is a way for a consumer to pull values from a
producer one value at a time.
ES6 has had all collections implement iterable
collection[Symbol.iterator]();
Provides a next() method
Returns an object that looks like this {value: 4, done:
false}
46. Iteration and For..of
var iterable = [4,6,1];
iterable.next(); //{value:4, done: false}
iterable.next(); //{value:6, done: false}iterable.next(); //{value:1,
done: true}
iterable.next(); //{done: true}
var iterable2 = [2,7,4];
for(num of iterable2) {
console.log(num);
}
47. Generators
Extends Iterators and allows you to create them
easier
Yield keyword allows for functions that ‘return’
multiple times
Can allow for infinite values
Can receive values