ES6:your new 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:                                                 ''

What's ECMA?

Ecma International is an industry association founded in 1961 and dedicated to the standardization of Information and Communication Technology (ICT) and Consumer Electronics (CE).

Ecma created a committee called TC39 ECMAScript in 2012 with the following purpose:
Standardization of the general purpose, cross platform, vendor-neutral programming language ECMAScript. This includes the language syntax, semantics, and libraries and complementary technologies that support the language.

Who's part of TC39?





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


Did i just read classes?




Current Status

Source:  http://kangax.github.io/compat-table/es6/

Shimmable or not

Unshimmable subset of ES6:

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









Arrow functions

Arrows 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 that = this;
    setTimeout(function timeout() {
       that.count++;
       }, 1000);
    }
}

example.increment();

Using arrows



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

example.increment();

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.
 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
};

Destructuring

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

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);
}

Modules




There's none built-in support for modules in ES5. The two most important work-arounds standards are
  • CommonJS Modules (CJS): the popular implementation of this standard is Node.js modules
  • Asynchronous Module Definition (AMD): The most popular implementation of this standard is RequireJS


ECMAScript 6 Modules Syntax

Exporting:
A module can be any file with Javascript in it.
You can export a variable declaration, a function declaration or a class declaration using the export keyword.


Suppose we have a calc.js file with this code:
    let notExported = 'abc';
    export function multiply(x) {
        return x * MY_CONSTANT;
    }
    export const MY_CONSTANT = 7;

Another option is:

    let notExported = 'abc';
    function multiply(x) {
        return x * MY_CONSTANT;
    }
    const MY_CONSTANT = 7;
    export { multiply, MY_CONSTANT };
You can rename while exporting:
    export { multiply as mult, MY_CONSTANT as ANOTHER_CONSTANT };
Re-exporting:
You can re-export some exports of another module like this:
    export { sha-1 as sha-1 } from 'lib/crypto';   // re-exports only sha-1
    export * from 'lib/crypto';     // or re-export everything

ES6 Modules

Importing
Now to import calc.js module into main.js you could just write
    import { multiply } from 'calc';
    console.log(multiply(3));
Main.js refers to calc.js through module ID 'calc' (string). The default interpretation of the module ID is a path relative to the importing module.
Another option would be to import the module as an object:
    import 'calc' as c;
    console.log(c.multiply(3));

Using ECMAScript 6 modules today

There are several projects that enables you to use ECMAScript 6 modules today:
  • ES6 Module Transpiler: write your modules using a subset of ECMAScript 6 (roughly: ECMAScript 5 + export + import), compile them to AMD or CommonJS modules.
  • ES6 Module Loader: polyfills the ECMAScript 6 module loader API on current browsers.
  • other: require-hm (plugin for RequireJS), Traceur (transpiler) or TypeScript.

Covered in this talk


Resources



Thank you!





Questions?

get this talk at bit.ly/es6part1

ES6:your new friend?

By Alejandro Oviedo García

Made with Slides.com

ES6:your new friend?

  • 2,955

More from Alejandro Oviedo García