ES6:your new kido-friend







Who I am?

Computer Science student at FCEyN
Working at Kidozen (www.kidozen.com)
Working with CoderHouse to build the Back End course

Github: a0viedo
Bitbucket: a0viedo
Twitter: @a0viedo
Pinterest:                                      ''
Instragram:                                  ''
ICQ:                                                 ''

Where i can find the specs?

An unofficial HTML version of ECMAScript 6 (a.k.a.  Next (a.k.a. Harmony)) working draft is being maintained by Mozilla here. For specification drafts released by ECMA you can visit wiki.ecmascript.org.


633 pages of pure love!

Features


Shimmable or not[1]

Unshimmable subset of ES6:

Basically any new syntax (i.e. let, const, etc). Same goes with Proxies and Modules.








[1]:Shim status of ES6 Gist

Extended object literals

Object literals are extended to support setting the prototype at construction, shorthand for foo: foo assignments, defining methods and making super calls[1].
 var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

[1] Object Initializer super references

Destructuring

In a programming language, destructuring assignment denotes the use of patterns to extract parts of an object.

SpiderMonkey has been supporting[1] destructuring assignment for a while. The latest ECMAScript 6 defines the grammar for destructuring assignment in Section 11.13.1. There are two different forms: array pattern and object pattern.

Array Pattern



var [d, m, a] = [21, 10, 2015]; 
//instead of var d = 21, m = 10, a = 2015;


x = 3; y = 4; [x, y] = [y, x] 
// instead of temp = [y, x]; x = temp[0]; y = temp[1];


function now() { return [15, 5, 2014, 20, 0]; }
var [d, m] = now(); // m = 15, d = 5
var [,,year] = now(); // no need to accept all elements

Object Pattern



function today() { return { d: 15, m: 5, y: 2014 }; }
var { m: month, y: year } = today(); // month = 5, year = 2014

var document = { timestamp: 1400077764803, latitude: -8.137003, longitude:  -34.901167, prop1 ....prop999 }

function processDocument({ latitude: lat, longitude: long }) {
    // do something here
}

Block scope

Two new reserved keywords are added in ECMAScript 6 for variable declaration: let and const.



Example:

for(var i = 0; i < 10; i++){
      setTimeout(function(){ 
            console.log(i);
      }, 10);
}

Block scope

Using let:
for(var i = 0; i < 10; i++){      let n = i;
      setTimeout(function(){ 
            console.log(n);
      }, 10);
}

Arrow functions

Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. Unlike functions, arrows share the same lexical this as their surrounding code. 
Arrow functions are always anonymous!

Example:
[1,2,3].forEach(function(x) { console.log(x + 1) }); // can be changed to
[1,2,3].forEach(x => console.log(x + 1));

(a, b) => {
   //your code
}

Lexical this 



var example = {
  count: 0,
  increment: function(){
    setTimeout(function timeout() {
       this.count++;
       }, 1000);
  }
}

example.increment();

A solution (ES5)


 var example = {
  count: 0,

  increment: function(){
    var self = this;
    setTimeout(function timeout() {
       self.count++;
       }, 1000);
    }
}

example.increment();

Using arrows



var example = {
  count: 0,
  increment: function() {
    setTimeout(() => this.count++, 1000);
  }
}

example.increment();


Maps

In ES5 code you could only have native data structures like dictionaries, that is, a string to value mapping.
The map specification let you use arbitrary values as keys. For example:
    > let map = new Map();
    
    > map.set('foo', 123);
    > map.get('foo')
    123
    
    > map.has('foo')
    true
    > map.delete('foo')
    true
    > map.has('foo')
    false

WeakMaps

It has the same API as Map, with one significant difference: you can’t iterate over the contents – neither the keys, nor the values, nor the entries. You can’t clear a WeakMap, either.[1]

Sets

The specification for the abstract set data structure. 
Examples:
    > let set = new Set();
    > set.add('red')
    
    > set.has('red')
    true
    > set.delete('red')
    true
    > set.has('red')
    false

WeakSets

A WeakSet is a set that doesn’t prevent its elements from being garbage-collected. Consult the section on WeakMap for an explanation of why WeakSets don’t allow iteration, looping and clearing.

Iterators


An iterator is an object with a next method that returns { done, value } tuples.



String, Array, TypedArray, Map and Set are all built-in iterables, because the prototype objects of them all have an @@iterator method.

Syntaxes expecting iterables

For-of loops, spread operator, yield*, and destructuring assignment.


Example:
for(let value of ["a", "b", "c"]){
    console.log(value);
}

Iterators: DIY

Example:
function idMaker(){
    var index = 0;
    
    return {
       next: function(){
           return {value: index++, done: false};
       }
    }
}

var it = idMaker();

console.log(it.next().value); // '0'
console.log(it.next().value); // '1'
console.log(it.next().value); // '2'

Generators


A generator is a specific type of iterator whose next results are determined by the behavior of its corresponding generator function. Generators also have a throw method, and their next method takes a parameter.


Generators

Basic example:
 function *foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
}

var it = foo();
console.log(it.next()); // { value:1, done:false }
console.log(it.next()); // { value:1, done:false }
console.log(it.next()); // { value:1, done:false }

Generators

More complex example:
 function *foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var it = foo( 5 );

console.log( it.next() );       // { value:6, done:false }
console.log( it.next( 12 ) );   // { value:8, done:false }
console.log( it.next( 13 ) );   // { value:42, done:true }

More use cases

Generators could also be combined with other control flow features like Promises[1], look at the following code:
function get(filename){
  return readJSON('left.json').then(function (left){
    return readJSON('right.json').then(function (right){
      return {left: left, right: right};
    });
  });
}
Could be:
var get = Q.async(function *(){
  var left = yield readJSON('left.json');
  var right = yield readJSON('right.json');
  return {left: left, right: right};
});
[1] A Study on Solving Callbacks with JavaScript Generators




Boooring. Gimme code.

https://github.com/kidozen/kido-agent/tree/es6


Covered in this talk


Resources



Thank you!





Questions?

ES6:your new kido-friend?

By Alejandro Oviedo García

Made with Slides.com

ES6:your new kido-friend?

  • 2,498

More from Alejandro Oviedo García