ECMAScript 6
Christian Gill / @gillchristian / github
ES6
- Intro
- Qués ES6?
- Principales caracteristicas
- 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!
JavaScript ES6
By Christian Gill
JavaScript ES6
- 1,315