an intro to es6
TRANSCRIPT
This Talk:- brief intro to ES6- getting started / workflow- glance at some new features- a whole lotta code- maybe some Q&A if I’m fast
var a = "outer";let b = "outer";
if (true) {var a = "block";let b = "block";
}
console.log(a); // "block"console.log(b); // "outer"
// activation objects:
for (var i=0; i<9; i++) { let j=i; setTimeout(function() { console.log(i, j); }, i);}
// 9,0// 9,1// 9,2 etc.
const RED = "red";RED = "green"; // fails silently!console.log(RED); // "red"
const RED = "blue"; // error! already defined
class Foo {function bar() {
var foo = `hello there ${name}.Welcome to ${getLocation()},we hope you enjoy your stay!`;}
}
var _ = "\n";var foo = `hello there ${name}.${_}Welcome to ${getLocation()},${_}we hope you enjoy your stay!`;
function dedent(str) { var lines = str.split("\n"); var indent = lines[1].match(/^\s+/); if (!indent) { return str; } var r = new RegExp("^"+indent); lines.forEach((v,i,a)=>a[i]=v.replace(r,"")); return lines.join("\n");}
var foo = dedent(`hello there ${name}. Welcome to ${getLocation()}, we hope you enjoy your stay!`);
var _this = this;setInterval(function() { _this.seconds++ }, 1000);
// es6:setInterval(()=>this.seconds++;, 1000);
function sum(a, b) {if (b == null) { b = 0; }return a+b;
}
// es6:function sum(a, b=0) {return a+b;
}
function scale(scaleX=1, scaleY=scaleX) {// etc.
}
function rotate(angle=Math.random()*360) {// etc.
}
function translate(x=this.tx, y=this.ty) {// etc.
}
sum(2, 5, 9, 17);
// es5:function sum(num) {for (var i=arguments.length-1; i>=1; i--) {num += arguments[i];
}return num;
}
// es6:function sum(...nums) {return nums.reduce((a,b)=>a+b);
}
function foo() {}foo.name; // "foo"
var bar = function() {}bar.name; // "bar"
let baz;baz = ()=>{};baz.name; // "baz"
var neutralNames = ["kelly", "jordan"]var boyNames = ["thor", "grant", ...neutralNames];var girlNames = ["sarah", ...neutralNames, "sue"];
var list = ["john", "jane"]inject(nameList, 1, "bob", "sue");
function inject(list, index, ...items) {list.splice(index, 0, ...items);
}
function polarToXY(a, d) { a *= Math.PI/180; return [Math.cos(a)*d, Math.sin(a)*d];}
var [x,y] = polarToXY(30,100);console.log(x,y); // 86, 49
var [,y] = polarToXY(30,100);console.log(y); // 49
function polarToXY(a, d) { a *= Math.PI/180; return {x: Math.cos(a)*d, y: Math.sin(a)*d};}
var {x,y} = polarToXY(30,100);console.log(x,y); // 86, 49
var {x:x1, y:y1} = polarToXY(30,100);console.log(x1,y1); // 86, 49
const PROP_NAME = "foo";var position = 20;var obj = {__proto__: new Bar(),
position, // position:position
advance(delta=0) {this.position += delta;
},
[PROP_NAME]: 20};
class Circle extends Shape {constructor(color, x=0, y=0, radius=Circle.DEF_RADIUS) {x = Math.round(x);super(color, x, y);this.radius = radius;
}
draw() {// … draw circle …super.fill();
}
get area() { return Circle.getArea(this.radius);}
static getArea(radius) { return Math.PI*radius*radius; }}Circle.DEF_RADIUS = 10;
YAY!
this.user = new User("Scrooge", "McDuck");// ... netData = new Map();netData.set(user, {NETDATA});// ...netData.get(user); // NETDATA
this.user = new User("Scrooge", "McDuck");// ... netData = new Map();netData.set(user, {NETDATA});// ...netData.get(user); // NETDATA
this.user = new User("Scrooge", "McDuck");// ... netData = new WeakMap();netData.set(user, {NETDATA});// ...netData.get(user); // NETDATA
this.user = new User("Scrooge", "McDuck");// ... netData = new WeakMap();netData.set(user, {NETDATA});// ...netData.get(user); // NETDATA
/*MISSED ANYTHING?- reflect APIs- for…of & iterators- tail call optimizations- typed arrays- function.name- new String, Math, Object, Number, Array APIs- subclassable built-ins*/
ES6 is here, and you should learn it.
You can learn and apply it iteratively.
Use a transpiler for client-side code.
Most features are syntactic sugar, but still nice.Use them responsibly!
A few new bits too, but wait to use them.
thanks!@gskinner
// resources:kangax.github.io/compat-table/es6/
2ality.com/2015/02/es6-classes-final.html
babeljs.io/docs/learn-es2015/
developer.mozilla.org/en-US/docs/Web/JavaScript
github.com/gskinner/es6gulp
jsfiddle.net