es6 and beyond
TRANSCRIPT
ES6 Beyon
d!& Beyond
!
Brian Patterson
What and WhyECMAScript 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
Forecast
Major Features Let, Const, and Arrow Functions
Classes
Default, Rest, and Spread
Iterators, Generators, & For…Of
Destructuring
Template Strings
Collections
Let, Const and Arrow
Functions(The Green Arrow)
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.
Block Scopingfunction 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}
ConstConstants 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
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}
Arrow Functions
Functions that use the scope of their parent
More concise
No more need for self=this
The problem var myObject = { param: 123, method: function(){ alert( this.param ); }, method2: function(){ setTimeout(function(){ alert( this.param ); },100); }} // method2 alerts undefined
Current Solutionvar myObject = { param: 123, method: function(){ alert( this.param ); }, method2: function(){ var self = this; setTimeout(function(){ alert( self.param ); },100); }}
With Arrow Functions
var myObject = { param: 123, method: function(){ alert( this.param ); }, method2: function(){ setTimeout(() =>{ alert( this.param ) },100); }}
Template Strings(Superman)
Template Strings
String interpolation instead of String concatenation
Multi-line strings
Tagged template strings
String Interpolation
let thing = ‘World’;let greeting = `Hello, ${thing}!`console.log(greeting); // Hello, World!
thing = ‘You’console.log(greeting); // Hello, You!
Multiline Stringsconsole.log(`In West Philiadelphia,
born and raised on the playground is where I spent most of my days`);
Tagged Template Strings
function tag(templates, …substitutions){// templates = [‘Hello ‘, ‘ ‘, ‘!’]// …substitutions = firstName, lastName
console.log(templates[0]); //Helloconsole.log(substitutions[0]); //John}
let firstName = ‘John’let lastName = ‘Smith’tag`Hello ${firstName} ${lastName}!`
Classes and Inheritance
(Batman/Alfred)
Classes and Inheritance
Syntactic sugar for prototypal inheritance
Constructor functions
The Super Keyword
Subclassing with extends
Constructor Functions
function Person(name) { this.name = name;} Person.prototype.describe = function(){ return 'Person called '+this.name;}
Class Syntactic Sugar
class Person { constructor(name) { this.name = name; } describe() { return 'Person called '+this.name; }}
Old way to do inheritance
function Employee(name, title) { Person.call(this, name); // super(name) this.title = title;}Employee.prototype = Object.create(Person.prototype);Employee.prototype.constructor = Employee;Employee.prototype.describe = function () { return Person.prototype.describe.call(this) // super.describe() + ' (' + this.title + ')';};
Subclassing with Extendsclass Employee extends Person {
constructor(name, title) { super(name); this.title = title; } describe() { return super.describe() + ' (' + this.title + ')'; }}
Collections(Fantastic Four)
Collections
Maps
Sets
WeakMaps
WeakSets
MapsMaps 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
Mapsvar colorObject = {color: ‘blue’};var myMap = new Map;myMap.set(‘petsAllowed’, ‘for a fee’);myMap.set(colorObject, 4);myMap.get(colorObject); // 4myMap.has(‘petsAllowed’); //truemyMap.size // 2;myMap.delete(colorObject);myMap[Symbol.iterator](); //returns an iteratormyMap.clear();
SetsSets are like arrays except they only contain unique values
Optimized for membership testing
Sets are not indexed
Implements Iterable
Setsvar mySet = new Set;mySet.add(4); //[4]mySet.add(‘hello’); // [4, ‘hello’]mySet.add(4); // [4, ‘hello’]mySet.size; // 2 mySet.has(‘hello’); //truemySet.delete(‘4’) //[‘hello’]mySet[Symbol.iterator](); //returns an iteratormySet.clear();
WeakMapsMaps whose keys must be objects onlyDoes not implement iterable, so you can’t get a list of its contentsOtherwise has all of the map methodsThis 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
WeakSetsSets of only objectsDoes not implement iterable, so you can’t get a list of its contentsOtherwise has all of the set methodsThis 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
Default, Rest, and Spread(Spiderman)
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
Default
function f(x, y=12) { // y is 12 if not passed // (or passed as undefined) return x + y;}f(3) == 15
Rest
function f(x, ...y) { // y is an Array return x * y.length;}f(3, "hello", true) == 6
Spread
function f(x, y, z) { return x + y + z;}// Pass each element of // array as argumentf(...[1,2,3]) == 6
Destructuring(The Incredible Hulk)
Destructuring
Allows you to assign variables from Arrays
You can skip over elements
Using rest with destructuring
Useful for variable swapping
Destructuring
var first = someArray[0];var second = someArray[1];var third = someArray[2];
var [first, second, third] = someArray;
Skipping elements
var [,,third] = ["foo", "bar", "baz"];console.log(third);// "baz"
Using Rest
var [head, ...tail] = [1, 2, 3, 4];console.log(tail);// [2, 3, 4]
Swappingvar a = 3;var b = 6;var temp; var x = 2; var y = 4;temp = a; //or [x,y] = [y,x]a = b;b = temp;
Iterators, Generators,
For..Of(The Green Lantern)
IteratorsAn 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}
Iteration and For..ofvar 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);}
GeneratorsExtends 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
Generatorsfunction* getNumbers() { yield 5; yield 32; yield 8;}
var generator = getNumbers();console.log(generator.next()); // {value: 5, done: false}console.log(generator.next()); // {value: 32, done: false}console.log(generator.next());// {value: 8, done: true}
Infinite Generatorsfunction* getFibonnacci() { var a = 0; var b = 1; yield a; while(true){ [a, b] = [b, a+b]; yield b; }}
var fibonnacci = getFibonnacci();console.log(fibonnacci.next().value)// 0console.log(fibonnacci.next().value)// 1console.log(fibonnacci.next().value)// 1console.log(fibonnacci.next().value)// 2console.log(fibonnacci.next().value)// 3console.log(fibonnacci.next().value)// 5
Yield can take valuesfunction* fillList() {
let list = [];while(list.length < 3) {
list.push(yield list)}return list;
}var myList = fillList();myList.next(); //{"value":[],"done":false}myList.next(5); //{“value”: [5],“done”:false}myList.next(2); //{“value”: [5,2],“done”:true}myList.next(4); //{“done”:true}
Useful Links
http://jsoverson.github.io/es6repl/https://babeljs.io/https://www.youtube.com/watch?v=DqMFX91ToLwhttp://exploringjs.com/es6/
Questions?