Looking forward to ES6

The next major version of JavaScript, defined by the ES6 spec, brings a lot of new features to JS. This is an introductory talk covering some of its most useful features for JavaScript developers.

Transcript

1. Looking forward to ES6 By Yosh Talwar / @izolate
2. Who am I? Full Stack Developer JS aficionado Work at Impero (@WeAreImpero)
3. The road to ES6
 (ECMAScript 6)
4. ECMAScript ECMAScript is the standard. The most popular implementation is JavaScript! Standardised by Ecma International in the ECMA-262 specification 1997 1998 1999 ???? 2009 ECMAScript 1 ECMAScript 2 ECMAScript 3 ECMAScript 4 (abandoned) ECMAScript 5
5. ECMAScript 6 (Harmony) Harmony? ES6? ES2015? August 2014 - Feature frozen June 2015 - Target release date Babel babeljs.io io.js iojs.org
6. let & const
7. let & const let is the new var Block scope use curly braces {}! No more hoisting const is a read-only, named variable
8. Scope Global scope (window) Function scope
9. Scope Global scope (window) Function scope Block scope
10. Scope a = 1; // global function() { var b = 2; // function if (true) { let c = 3; // block } }
11. Scope for (var i=0; i<2; i++) { // code } console.log(i); // 2 for (let i=0; i<2; i++) { // code } console.log(i); // ReferenceError: // i is not defined
12. const const pi = 3.1415926535; pi = 'cottage'; // SyntaxError: "pi" is read-only console.log(pi); // 3.1415926535
13. Arrow functions
14. Arrow functions Shorthand for an anonymous function (lambda) using "fat arrow" => syntax No constructor (not new-able) Automatically binds lexical this from containing scope (No more this = that)
15. Fat arrow // ES5 var squared = [1, 5, 10].map(function(num) { return num*num; }); // ES6 let squared = [1, 5, 10].map((num) => num*num); console.log(squared); // [1, 25, 100]
16. Lexical this User.prototype.foo = function(){}; // ES5 User.prototype.edit = function (req, res) { db.Model.findById(123, function(err, model) { this.foo(); // Object has no method 'foo' }); }; // ES6 User.prototype.edit = function (req, res) { db.Model.findById(123, (err, model) => { this.foo(); // cool }); };
17. String templates
18. Backticks (`) // Basic literal string creation `In JavaScript '\n' is a line-feed.`; // Multiline strings let slogan = ` Have a break... Have a kit-kat.`; // String interpolation let name = 'Bruce', time = 'evening'; `Hello ${name}, how are you this ${time}?`;
19. Object literals (enhanced)
20. Syntactic sugar // ES5 function createPerson(name, age) { return { name: name, age: age }; } // ES6 function createPerson(name, age) { return { name, age }; }
21. Syntactic sugar let me = { name: 'Yosh', age: 28, // the old way height: function() { return 172; }, // the new way weight() { return 12; } };
22. Function parameters
23. function save(title, body, date=Date.now()) { db.Comments .create({title, body, date}, callback); } function sum(x=0, y=0) { return x + x; } Default parameters
24. Rest parameters function example(...things) { things.forEach((thing) => { console.log(thing); }); } example('a', 'b', 'c');
25. Spread function sum(x, y, z) { return x + y + z; } let numbers = [1, 5, 10]; // ES5 sum.apply(null, numbers); // ES6 sum(...numbers) === 16;
26. Classes
27. Classes Putting the 'Java' in JavaScript JS uses prototypes for inheritance Syntax sugar over prototypal inheritance.
28. class Monster { constructor(name, health) { this._name = name; this._health = health; } destroy() { this._health = 0; } }; class Zombie extends Monster { constructor(name, health) { super(name, health); } get isAlive() { // getter return this._health > 0; } set health(value) { // setter this._health = health; } kill() { super.destroy(); } }; let dave = new Zombie('dave', 100); console.log(dave.isAlive); // true
29. Generators
30. Iterator function *foo() { yield 1; yield 2; yield 3; } let iter = foo(); iter.next(); // { value: 1, done: false } iter.next(); // { value: 2, done: false } iter.next(); // { value: 3, done: true }
31. Callback hell Person.findOne({ id: 123 }, (err, per) => { // person found Location.findOne(query, (err, loc) => { // location found // some more async calls... }); });
32. Yield let person = yield Person.findOne(...); let location = yield Location.findOne(...); // async that reads as synchronous
33. Modules
34. //------ foo.js ------ export const pi = 3.1415926535; export function square(x) { return x * x; } export obj = {}; //------ bar.js ------ import { pi, square, obj } from 'foo'; square(11); // 121 console.log(pi); // 3.141...
35. //------ foo.js ------ export let foo = 2 export let bar = 3 //------ bar.js ------ import stuff from 'foo'; stuff.foo // 2 stuff.bar // 3
36. Default //------ foo.js ------ export default (x) => { return x * x; }; //------ bar.js ------ import square from 'foo'; square(11); // 121
38. Questions? Looking forward to ES6 by Yosh Talwar Yosh Talwar | @izolate 2015/03/10 @ London AJAX