ES6

the parts

Motivación?

ES6 = ECMAScript 6 = ECMAScript 2015 = La version del estándar de implementación de Javascript ratificada en Junio del 2015

ES6

Es un paso crítico en la evolución del lenguaje!!!

Conoce a:

Compilador

Transpilador

Código fuente Código para las Máquinas

Código Fuente Otro Código Fuente

Es un Transpilador de Javascript a ECMAScript 6

Guía Rápida

Declaración de Variables

var data;

let data;
const data; // para constantes

Antes

Después

Interpolación en Cadenas

console.log(x + ', ' + y);

console.log(`${x}, ${y}`)

Antes

Después

Muchas Cadenas

var HTML5_SKELETON =
    '<!doctype html>\n' +
    '<html>\n' +
    '<head>\n' +
    '    <meta charset="UTF-8">\n' +
    '    <title></title>\n' +
    '</head>\n' +
    '<body>\n' +
    '</body>\n' +
    '</html>\n';

const HTML5_SKELETON = `
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    </html>`;

Antes

Después

Funciones

function showModal() {
  var that = this;
  $('#container').on('click', function() {
    that.updatePosition();
  });
}

function showModal() {
  $('#container').on('click', () => {
    this.updatePosition();
  });
}

Antes

Después

Desestructuración

var fecha = [2015, 10, 23];
var dia = fecha[2]

var page = { impresiones: 23, unicas: 5 };
var unicas = page.unicas;

let fecha = [2015, 10, 23];
let [ , , dia] = fecha;

const page = { impresiones: 23, unicas: 5 };

{ , unicas } = page; // esto no funciona

// Destructuring aquí, funciona a la "pick what you want"
let { unicas: misVisitasUnicas } = page; // ahora `misVisitasUnicas` esta declarada
let { unicas } = page; // ahora `unicas` esta declarada

Antes

Después

for-of

var arr = ['a', 'b', 'c'];
for (var i=0; i<arr.length; i++) {
    var elem = arr[i];
    console.log(elem);
}

let arr = ['a', 'b', 'c'];
for (let elem of arr) {
    console.log(elem);
}

// si ocupas acceder al índice
let arr = ['a', 'b', 'c'];
for (let [index, elem] of arr) {
    console.log(elem);
}

Antes

Después

Parámetros Predeterminados

function foo(x, y) {
    x = x || 0;
    y = y || 0;
    ···
}

function foo(x=0, y=0) {
    ···
}

Antes

Después

El parámetro `options`

function selectEntries(options) {
    var start = options.start || 0;
    var end = options.end || -1;
    ···
}

function selectEntries({ start=0, end=-1 }) {
    ···
}

function selectEntries(
    { start=0, end=-1 } = {}
) {
    ···
}

Antes

Después

`rest` parameters

function logAllArguments() {
    for (var i=0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

function logAllArguments(...args) {
    for (let arg of args) {
        console.log(arg);
    }
}

Antes

Después

No mas `apply()`

> Math.max.apply(null, [-1, 5, 11, 3])
> 11

new Date(2015, 10, 23);

> Math.max(...[-1, 5, 11, 3])
> 11

> Math.max(-1, ...[-1, 5, 11], 3)
> 11

let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];

arr1.push(...arr2);
// arr1 is now ['a', 'b', 'c', 'd']
let newArr = [...arr1, ...arr2];

new Date(...[1912, 11, 24])

Antes

Después

The spread operator turns the elements of an Array into arguments of a function call or into elements of an Array literal.

Clases

function Person(name) {
    this.name = name;
}
Person.prototype.describe = function () {
    return 'Person called '+this.name;
};

class Person {
    constructor(name) {
        this.name = name;
    }
    describe() {
        return 'Person called '+this.name;
    }
}

Antes

Después

Clases

Math.max.apply(null, [-1, 5, 11, 3])

> 11

Math.max(...[-1, 5, 11, 3])
11

Antes

Después

Tópicos

Especiales

Clases

class Car {
  constructor(passengers) {
    this.passengers = passengers;
  }

  claxon(state) {
    //...
  }
}

class Jeep extends Car {
  constructor() {
    super();
  }
}