Guia completa sobre ECMAScript 6

ECMAScript 6 es la nueva versión del lenguaje estándar ECMAScript que esta terminada desde Junio de 2015. ES6 es la primer actualización al lenguaje desde que en 2008 salió ECMAScript 5.Podemos usar ECMAScript 6 en nuestros proyectos actuales, solo necesitamos apoyarnos de una herramienta llamada: Babel.jsBabel.js es un transpiler que permite convertir código de ECMAScript 6 a código compatible con la mayoría de navegadores modernos.Instalando Babel.jsPara poder usarlo lo primero es instalarlo, para esto necesitamos tener Node.js o io.js instalado en nuestra computadora.Una vez instalado node (desde acá voy a usar node para referirme a io.js y Node.js) usando NPM instalamos Babel.js de forma global con el comando:sudo npm i -g babelLuego cuando queramos usar Babel podemos usamos el siguiente comando.babel archivo.js -o build.jsEste nos va a convertir el código de archivo.js de ES6 a ES5 y mostrar el resultado en la consola.babel-node archivo.jsEste nos va a convertir el código de archivo.js y ejecutarlo con node, de esta forma podemos usar todas las características de ES6 en node.Usandolo con BrowserifyBabel se puede utilizar con Browserify gracias a un plugin de este llamado Babelify, para esto simplemente instalan Browserify y Babel como dependencia de desarrollo de su proyecto con el siguiente comando.[sudo] npm i -D browserify babelifyLuego utilizamos Browserify pasándole Babelify como transform con el comando:browserify -t babelify -i src/main.jsx -o build/main.jsEsto va a convertir nuestro código ES6 a ES5, generar un único archivo a partir de nuestro main.js ubicado en la carpeta src, cargar los módulos que hayamos requerido desde node_modules y crear un único archivo ES5 en la carpeta build.Usandolo con GulpBabel también se puede utilizar con Gulp.js utilizando el plugin gulp-babel, para esto descargan Gulp.js y gulp-babel con el siguiente comando.[sudo] npm i -D gulp gulp-babelLuego creamos una tarea de Gulp en nuestro archivo gulpfile.js en la raíz del proyecto en la cual leemos los archivos en ES6, ejecutamos gulp-babel y luego guardamos los archivos generados en otra carpeta.var gulp = require('gulp');var babel = require('gulp-babel');gulp.task('js', function () { gulp.src('/src/es6/*.js') .pipe(babel()) .pipe(gulp.dest('/build/js/'));});Usandolo con NodemonBabel también se puede utilizar con nodemon simplemente agregando algunos parámetros al momento de ejecutar nodemon usando el siguiente comando:nodemon --exec babel-node -- server.jsCon esto podemos usar babel-node para correr nuestra aplicación con Node.js y que cada vez que se realice un cambio se reinicie el servidor.Usandolo con MochaBabel también se puede utilizar con Mocha simplemente agregando algunos parámetros al momento de ejecutar Mocha usando el comando:mocha --compilers js:babel/registerVariables de bloque y constantesVariables de bloqueEn ES6 se agrega una nueva forma de definir variables usando la palabra let en vez de var.Se diferencia de var en que el scope de una variable definida con let es el bloque en el cual se encuentra la variable y no la función.Ejemplo:for (let i = 0; i < 5; i++) { console.log(i);};console.log(i);ConstantesAlgo que sin duda faltaba en JS era las constantes. Con ES6 es posible definir tus propias constantes usando la palabra const en lugar de let o var. Una constantes como el nombre indica no puede cambiar de valor una vez definida, tiene un valor constante.Las constantes también tienen un scope de bloque.const DIEZ = 10;DIEZ = 5;console.log(DIEZ);Template stringsLos template string son una forma más fácil de crear strings con variables en medio del string o strings multilínea.Variables en stringsPara meter una variable dentro de un template string hay que colocar el nombre de esta variable entre de ${ y } (no solo variables, incluso pueden ejecutar funciones o colocar expresiones como 2+2).let nombre = 'Don Pepito';console.log(`Hola ${nombre}`);Strings multilíneaPara poder crear un string multilínea con template strings basta con apretar enter y en la siguiente línea seguir escribiendo.let mensaje = `Hola Don PepitoHola Don Jose`;console.log(mensaje);Números en Octal y BinarioNúmeros en OctalDesde ES6 va a ser posible definir variables usando números en Octal con el siguiente código:console.log(0o35);Números en BinarioDesde ES6 va a ser posible definir variables usando números en Binario con el siguiente código:console.log(0b1001);Objeto MathEn ES6 se agregan una lista de nuevos métodos al objeto Math, casi todos ya están soportados desde hace un par de años en los navegadores..acosh().asinh().atanh().cbrt().clz32().cosh().exp1m().fround().hypot().imul().log10().No puse ejemplos porque son muchos y se pueden ver en Mozilla Developer Network.Métodos de ArraysArray.from(array, mapFn)Este nuevo método del objeto Array permite crear un array copiando otro array o un NodeList.Es posible utilizarlos actualmente mediante polyfills.let arr1 = [1,2,3];let arr2 = Array.from(arr1, v => --v; );arr2.push(3);console.log(arr1);console.log(arr2);Otros métodosAdemás de .from() se agregaron los siguientes métodos:.of(): crea un nuevo array con un número variado de elementos.fill(): llena un array con un nuevo valor en cada elemento.find(): busca un elemento dentro de un array y devuelve el valor.findIndex(): similar a .find() pero devuelve el índice.entries(): devuelve una instancia del objeto Iterator que contiene cada índice y valor del array.keys(): similar a .entries() pero el Iterator solo muestra los índices.copyWithin(): copia los elementos de un array en las posiciones indicadasMétodos de ObjectObject.assign(objetivo, ...objs)Este nuevo método permite asignar propiedades de uno o más objetos a otro objeto pisando las propiedades con nombres repetidos por el valor del último objeto indicado. Esta propiedad es muy útil para realizar herencia entre objetos .Este método se puede utilizar ya gracias a un polyfilllet obj1 = { prop1: 'valor'};let obj2 = { prop2: 'otro valor'};let obj3 = { prop1: 'nuevo valor'};let obj4 = Object.assign({}, obj1, obj2, obj3);console.log(obj4);Object.is(valor1, valor2)Este nuevo método sirve para comparar si dos valores son iguales, devuelve true si ambos son: undefinednulltrue o falsestrings con el mismo largo y los mismos caracteresel mismo objetonúmeros y ambos: son mayores a 0 son menores a 0 son NaN no son 0, no son NaN y son el mismo númeroAl igual que .assign() se puede utilizar ya mismo mediante un polyfill.let obj1 = { nombre: 'valor' }let obj2 = { nombre: 'valor' };console.log(Object.is(obj1, obj1));console.log(Object.is(obj1, obj2));Forma abreviada de definición de ObjetosAsignación de propiedadesCon ES6 ahora va a ser mucho más simple (y lógico) utilizar una variable para definir el valor de una propiedad de un objeto.let nombre = 'Jose';let persona = { nombre, honorifico: 'Don'};console.log(persona);Asignación de métodosAl igual que es más fácil usar variables en propiedades también se simplificó la forma de definir métodos en un objeto.let pepito = { saludar(persona) { return `Hola ${persona.honorifico} ${persona.nombre}`; }}console.log(pepito.saludar({ nombre:'Jose', honorifico:'Don' }));Asignación por descomposiciónSi ya dijimos que con ES6 nos es más fácil crear objetos usando variables, también nos vas a ser más fácil hacer lo contrarios, descomponer un objeto (o un array) en variables// objetoslet persona = { nombre: 'Jose', honorifico: 'Don'};let { nombre, honorifico: titulo } = persona;console.log(nombre);console.log(titulo);// arrayslet fecha = [24, 4, 2015];let [d, , y] = fecha;console.log(d);console.log(y);Parámetros por defectoAlgo que siempre falto en JS al momento de definir funciones eran los parámetros con valores por defecto, siendo la única forma de lograr esto redefinir el valor de un parámetro con el mismo parámetro o el valor por defecto (no muy optimo que digamos).Con ES6 ahora es completamente posible definir un valor por defecto a los parámetros de nuestras funciones al igual que en otros lenguajes de programación.function saludar (nombre, honorifico = 'Don') { return `Hola ${honorifico} ${nombre}`;}console.log(saludar('Pepito', 'Don'));console.log(saludar('Jose'));Arrow functionsArrow function es una nueva forma de definir funciones en JS similar a como hace CoffeeScript. Hay distintas variantes en la sintaxis de las arrow function.Función de un solo parámetroAl crear una arrow function de un solo parámetro no es necesario escribír los paréntesis.Como se puede ver en el ejemplo tampoco es necesario escribír las llaves siempre. Esto ocurre solo cuando la función es de una sola línea y devuelve un valor.let sumarUno = x => x + 1;console.log(sumarUno(23));Función de varios parámetrosEn el caso de que queramos utilizar más de un parámetro ahí sí es necesario envolver el nombre de estos entre paréntesis.let sumar = (x, y = 1) => x + y;console.log(sumar(1264, 751));console.log(sumar(3));Función sin parámetrosTambién son necesarios los paréntesis si queremos crear una función que no reciba parámetros.let saludar = () => 'Hola Don Pepito'console.log(saludar());Función con cuerpoPor último, si la función tiene más de una línea (o no devuelve ningún valor) es necesario utilizar las llaves.let saludar = persona => { let { nombre, honorifico } = persona; let mensaje = `Hola ${honorifico} ${nombre}`; return mensaje;}console.log(saludar({ nombre: 'Pepito', honorifico: 'Don' }));Parámetros restLos parámetros rest son una forma de utilizar parámetros virtualmente infinitos (nunca supe de ningún límite) en una función que vendría a substituír al array arguments que tienen actualmente las funciones.Los parámetros rest se definen agregando ... adelante del nombre que se le quiera asignar al mismo. El parámetro rest tiene que ser siempre el último parámetro de una función.function sumar (a, b, ...c) { let resultado = a + b; c.forEach(n => { resultado += n; }); return resultado;}console.log(sumar(1,2));console.log(sumar(1,2,3));console.log(sumar(1,2,3,4));console.log(sumar(1,2,3,4,5));PromesasLas promesas es algo que se viene usando ya desde hace un par de años gracias a librerías como Q. En ES6 las promesas van a pasar a tener soporte nativo del lenguaje con una sintaxis bastante simple.function obtenerDatos () { return new Promise((resolve, reject) => { let n = Math.floor(Math.random() * 2) + 1; setTimeout(() => { if (n === 1) resolve('Datos obtenidos'); else reject(new Error('Hubo un error al obtener los datos')) }, 500); });}obtenerDatos() .then(data => { console.log(data); }) .catch(error => { console.log(error); });GeneradoresLos generadores son un tipo de función especial que permite parar la ejecución de la misma y devolver un valor, para luego poder seguir ejecutándola.function* fibonacci() { let anterior = 0, actual = 1; while(true) { let temp = anterior; anterior = actual; actual += temp; yield actual; }}let fibo = fibonacci();for (let i = 0; i < 5; i++) { console.log(fibo.next());}Iterators y for...ofIteratorsLos Iterators son un tipo de objeto que nos permite iterarlos usando el método .next() (los generadores son instancias de Iterator).let arr = ['foo','bar','baz'];let eArr = arr.entries();console.log(eArr.next());console.log(eArr.next());console.log(eArr.next());console.log(eArr.next());for...ofEste es un nuevo bucle similar a for...in donde la variable que usamos para recorrer un array devuelve el valor de cada elemento y no la posición.Este bucle sirve perfectamente para recorrer un Iterator.let arr = [1,2,3];for (let n of arr) { console.log(n);}ProxiesLos proxies de ES6 te permiten interceptar y personalizar las distintas operaciones que se pueden realizar en un objeto.let Jose = { nombre: 'Don Jose'};let proxy = new Proxy(Jose, { get(target, propiedad) { let mensaje = `obteniendo ${propiedad}:${target[propiedad]}`; console.log(mensaje); }});proxy.nombre;ClasesDesde ES6 se incorporan al lenguaje clases para poder hacer POO más fácilmente (sin prototype). Las clases de ES6 son solo un syntax sugar de la como se hace actualmente con prototype.Definición de clasePara definir una clase simplemente se usa la palabra class seguida del nombre de la clase y luego entre llaves los métodos de esta.class Persona{ constructor(nombre) { this.honorifico = 'Don'; this.nombre = nombre; } saludar(persona) { return `Hola ${persona.honorifico} ${persona.nombre}`; }}let Pepito = new Persona('Pepito');let Jose = new Persona('Jose');console.log(Jose.saludar(Pepito));console.log(Pepito.saludar(Jose));Extendiendo una claseAl igual que en otros lenguajes es posible extender una clase agregando extends ClaseBase luego del nombre de la nueva clase.class Perro { constructor(raza) { this.raza = raza; } comer() { return 'comiendo' };}class Bulldog extends Perro { constructor(nombre) { super('Bulldog'); this.nombre = nombre; } comer() { return `${this.nombre} está ${super.comer()}`; }}let Tronco = new Bulldog('Tronco');console.log(Tronco.comer());Métodos estáticosTambién es posible definir métodos estáticos que se pueden ejecutar sin necesidad de instanciar la clase simplemente agregando static antes del nombre del método (el método constructor no puede ser estático).class calculadora { static sumar(...numeros) { let resultado = 0; numeros.forEach(numero => { resultado += numero; }); return resultado; }}console.log(calculadora.sumar(1,2,3));Getters y SettersPor último también es posible definir getter y setters agregando get o set antes del nombre de un método.class Persona { constructor(nombre) { this._nombre = nombre; } get nombre() { return this._nombre; } set nombre(nuevo) { this._nombre = nuevo; }}let Pepito = new Persona('Pepito');console.log(Pepito.nombre);Pepito.nombre = 'Don Pepito';console.log(Pepito.nombre);MódulosDesde ES6 vamos a tener un sistema nativo de módulos que viene a sustituir a los actuales CommonJS, AMD, etc.Hay varias formas de exportar e importar módulos con el nuevo sistema.Exportación únicaLa primera forma es cuando tenemos un solo dato a exportar (una función, un objeto, etc.), para esto usamos la siguiente sintaxis.class Persona { constructor(nombre) { this.honorifico = 'Don'; this.nombre = nombre; } saludar(persona) { return `Hola ${persona.honorifico} ${persona.nombre}`; }}export default Persona;Multiples exportacionesSe puede dar el caso de querer exportar muchos datos al mismo tiempo, para eso simplemente quitamos el default luego del export.function sumar (x, y) { return x + y};function restar (x, y) { return x - y};export sumar;export restar;CombinándolosPor último puede pasar que quieras dejar una exportación por defecto y la posibilidad de importar otros datos especificando.function sumar (x, y) { return x + y};function restar (x, y) { return x - y};let calculadora = { sumar, restar };export default calculadora;export sumar;export restar;Importando de forma síncronaPara importar hay dos forma, la primera es la forma síncrona, esta a su vez tiene varias forma. pero todas se basan es usa import seguido del nombre que se le quiere dar al módulo a importar y luego from y la ubicación del módulo en un string.// desde Exportación únicaimport Persona from './archivo.js';// desde Multiples exportacionesimport * as calc from './archivo.js';// desde Combinandolosimport calc from './archivo.js';import { sumar } from './archivo.js';Importando de forma asíncronaLa otra forma es la importación asíncrona de módulos, esta además tiene la característica de que va a funcionar desde etiquetas