A brief overview of ES6 and the future of JavaScript
Stagnation on the web is a social ill. - Brendan Eich
It's not often that as a programmer you get an entirely new set of tools
This deck is not going to try and show you everything
But we will try to show you the awesome parts:
//var is function scope
if ( true ) {
var x = 3;
}
console.log(x); //3
//let is block scope
if ( true ) {
let x =3;
}
console.log(x); //ReferenceError
//Let gives you a fresh iteration per loop
let vals =[];
for ( let x = 0; x < 4; x++ ) {
vals.push(() => x);
}
console.log(vals.map(x => x())); // [0, 1, 2, 3]
// with var you get [4,4,4,4]
// const makes variables immutable
const obj = { foo : 3 }
obj = 4; //TypeError
// but it doesn't stop from changing the object values
obj.foo = 12; //fine
// you can use Oject.freeze() to do this
Object.freeze(obj);
obj.par = 10;
function bar(x) {
console.log(x);
return x + 1;
}
//is equivalent to:
let bar = x => {
console.log(x);
x + 1;
}
//2 parameters
let bar = ( x, y ) => x + y;
//no parameters
let bar = () => 7;
// the ES5 Way
function Person() {
// Some choose `that` instead of `self`.
// Choose one and be consistent.
var self = this;
self.age = 0;
setInterval(function growUp() {
// The callback refers to the `self` variable of which
// the value is the expected object.
self.age++;
}, 1000);
}
var p = new Person();
// The ES6 way
function Person(){
this.age = 0;
setInterval(() => {
// |this| properly refers to the person object
this.age++;
}, 1000);
}
var p = new Person();
functions that can be paused and resumed
//Two things distinguish genFunc from a normal function declaration:
// It starts with the “keyword” function*.
// It is paused in the middle via yield.
function* genFunc() {
console.log('First');
yield; // (A)
console.log('Second'); // (B)
}
// Calling genFunc does not execute it.
// Instead, it returns a so-called generator
// object that lets us control genFunc’s execution:
let genObj = genFunc();
// genFunc() is initially suspended at the beginning of its body.
// The method genObj.next() continues the
// execution of genFunc, until the next yield:
genObj.next() //First
{ value: undefined, done: false }
genObj.next() //Second
{ value: undefined, done: true }
an expression that makes it possible to extract data from arrays or objects into distinct variables.
var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
[a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
({a, b} = {a:1, b:2})
console.log(a); // 1
console.log(b); // 2
// This is syntactic sugar for string concatenation
// Anything in a ${} is evaluated
// backticks are used to enclose a string
// New lines are retained
let name = 'Ray'
`Hi ${name},
Did you know that 5 * 3 = ${5*3}?`
/*
"Hi Ray,
Did you know that 5 * 3 = 15?"
// Let’s create a map:
let map = new Map();
let val2 = 'val2';
let val3 = {
key: 'value'
};
let key2 = {key: 2}
map.set(0, 'val1');
map.set('1', val2);
map.set(key2, val3);
console.log(map);
// Map {0 => 'val1', '1' => 'val2', Object {key: 2} => Object {key: 'value'}}
Maps are a store for key / value pairs. Key and value could be a primitives or object references.
// Let’s create a Set:
let set = new Set();
set.add(1);
set.add('1');
set.add({ key: 'value' });
console.log(set);
// Set {1, '1', Object {key: 'value'}}
It’s a collection for unique values. The values could be also a primitives or object references.
// Set doesn’t allow to add duplicates.
let set = new Set([1, 1, 1, 2, 5, 5, 6, 9]);
console.log(set.size); // 5!
//Symbols can be used as property keys:
const MY_KEY = Symbol();
let obj = {};
obj[MY_KEY] = 123;
console.log(obj[MY_KEY]); // 123
Symbols are a new, special kind of object that can be used as a unique property name in objects.
// They are tokens that serve as unique IDs.
Symbol("foo") === Symbol("foo"); // false