Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6: Using future JavaScript today

ES6: Using future JavaScript today

This talk covers the upcoming specification of JavaScript, ECMAScript 6. It highlight some of the key features, and most importantly, how it can be used in projects today.

Phil Bottomley

April 25, 2015
Tweet

Other Decks in Programming

Transcript

  1. Firefox 37 Chrome 42 Safari 8 iOS8 IE11 IE10 IE9

    IE8 11% 97% 100% 100% 100% 100% 100% 100%
  2. classes enhanced object literals template strings destructuring default rest spread

    let const iterators for..of generators unicode arrows modules module loaders map set weakmap weakset proxies symbols subclassable built-ins promises math number string array object APIs binary and octal literals reflect api tail calls
  3. Arrow functions var person = { name: 'John', age: 30,

    children: ['Jane', 'Jonny'], printChildren: function () { this.children.forEach(c => { console.log(this.name + ' has child ' + c); }); } };
  4. Let / Const function doSomething() { console.log(foo); // Error if

    (true) { let foo = 'bar'; let foo = 'oops'; // Error } console.log(foo); // Error }
  5. Enhanced Object Literals var obj = { // prototype __proto__:

    protoObject, // ‘handler: handler’ handler, // Shorthand methods hello() { return 'Hello, ' + super.hello(); }, // Computed property names [secret]: 42 };
  6. Default + Rest + Spread function doSomething(x, y=2) { return

    x + y; } doSomething(100); doSomething(100, undefined);
  7. Default + Rest + Spread function doSomething(x, ...y) { //

    y is an Array return x * y.length; } doSomething(3, "hello", true);
  8. Default + Rest + Spread function doSomething(x, y, z) {

    return x + y + z; } var someArray = [1, 2, 3]; doSomething(...someArray);
  9. Template strings var name = 'Bob'; var hello = `Hello,

    my name is ${name}`; var hello2 = `Hello my name is Bob`;
  10. Iterators + For…Of var words = ['One', 'Two', 'Three'] for

    (var word of words) { console.log(word); } // One, Two, Three
  11. Generators function *foo() { yield 1; yield 2; return 3;

    } var iterator = foo(); console.log( iterator.next() ); // { value:1, done:false } console.log( iterator.next() ); // { value:2, done:false } console.log( iterator.next() ); // { value:3, done:true }
  12. Generators function *foo() { yield 1; yield 2; return 3;

    } for (var v of foo()) { console.log(v); } // 1 2
  13. Classes class Animal { constructor(name, legs) { this.name = name;

    this.legs = legs; } hello() { return 'Hello, my name is ' + this.name; } }
  14. Classes class Cat extends Animal { constructor(name) { super(name, 4);

    } hello() { return 'Meow, my name is ' + this.name; } }
  15. Modules import Animal from ‘./animal’; import { square, squareRoot }

    from ‘./utils’; import * as utils from ‘./utils’;
  16. Modules // ———— animal.js ———— export default class Animal {

    //... } // ———— utils.js ———— export function square(x) { //.. } export function squareRoot(x) { //.. }
  17. Array, Number and String Array.from() Array.of() Array.prototype.fill() Array.prototype.find() Array.prototype.findIndex() Array.prototype.entries()

    Array.prototype.keys() Array.prototype.copyWithin() Number.isNaN() Number.isFinite() Number.isInteger() Number.parseInt() Number.parseFloat() Number.isSafeInteger() Number.EPSILON Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER String.raw() String.fromCodePoint() String.prototype.codePointAt() String.prototype.normalize() String.prototype.startsWith() String.prototype.endsWith() String.prototype.includes() String.prototype.repeat()
  18. Spartan Firefox 37 Chrome 42 Safari 8 IE 11 16%

    20% 45% 63% 73% IOS 8 20% io.js Node 23% 41%