ECMAScript 6

Christian Gill / @gillchristian / github

ES6

  1. Intro
  2. Qués ES6?
  3. Principales caracteristicas
  4. Transpilers: Babel

es5? es6?

es2015? es2016?

es5 ~= Actual (2009)

es6 == es2015

es2016

es2017?

...

Características

  • Arrow functions
  • Classes
  • Const & Let
  • Object literals mejorados 
  • Template literals
  • Destructiring
  • Rest, Spread, parámetros por defecto
  • Módulos
  • iterators + for..of
  • generators
  • unicode
  • promises
  • map + set + weakmap + weakset
  • proxies
  • symbols
  • subclassable built-ins
  • binary and octal literals
  • reflect api
  • tail calls
  • math + number + string + array + object APIs

Arrow functions

fetch('http://some-cool-api/users')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.log('Ups, un error: ' + err));

Classes y Herencia

class Vehiculo {
  constructor(nombre, ruedas){
    this.nombre = nombre;
    this.ruedas = ruedas;
  }

  costoCambioRuedas() {
    return this.ruedas * 100;
  }
}

class Auto extends Vehiculo {
  constructor(nombre, ruedas, marca){
    super(nombre, ruedas);
    this.marca = marca;
  }

  costoCambioAceite(){
    return 180;
  }
}

Object literals con esteroides

var obj = {
  // __proto__ : seteo de prototype
  __proto__: theProtoObj,

  // Equivale a ‘propiedad: propiedad’
  propiedad,

  // Metodos
  toString() {
   // Llamadas a super
   return "d " + super.toString();
  },

  // Nombres de propiedades dinamicos computados
  [ 'prop_' + (() => 42)() ]: 42
};

Template literals

`
Strings
multi 
linea
`

var name = "Jorge";
var time = 13;
console.log(
  `Hola ${name}, 
   Buen${time < 12 ? 'os dias' : 'as tardes' }!`
);

Destructuring

var { a, b, c } = foo;
var { c: { bar } } = foo;

var { 
  a: x, 
  b: y, 
  c: { bar: z } 
} = foo;
var a = foo.a;
var b = foo.b;
var c = foo.c;
var bar = foo.c.bar;

var x = foo.a;
var y = foo.b;
var z = foo.c.bar;
var foo = {
  a: 1,
  b: 2,
  c: {
    bar: 'foo'
  }
};

Más ...destructuring

function f(x, y = 12) {
  return x + y;
}
f(3) // 15
function f(x, ...y) {
  // y es un Array
  return x * y.length;
}
f(3, "hello", true) // 6
function f(x, y, z) {
  return x + y + z;
}
// cada elemento del array como argumeto
f(...[1,2,3]) // 6

Parámetros por defecto

Rest & Spread

Módulos

// /index.js
import sum from './basicMath';
import subtract from './basicMath';

console.log(sum(1, 2)); // 3

console.log(subtract(2, 1)) // 1

// basicMath.js

export function sum(a, b){
  return a + b;
}


export function subtract(a, b){
  return a - b;
}

Gracias!

Made with Slides.com