Curso de

EcmaScript 7

www.devcode.la

www.devcode.la

INSTRUCTOR

• Enrique Munguía
• Software Engineer (Google)
• Twitter: @enrique7mc_
• Blog: enrique7mc.com

www.devcode.la

OBJETIVOS

• Entender cómo funciona el proceso para añadir nuevas características a la especificación del lenguaje.
• Revisar las nuevas características en ECMAScript 2016 y 2017.
• Aprender a utilizar las nuevas funciones async para mejorar los programas asíncronos.

REQUISITOS

• Conceptos de JS/ES6

• Conocimientos básicos de node/npm

• Uso de terminal

www.devcode.la

• Crear programas que utilicen características de ES 2016 y 2017.

ACTIVIDADES

• Aprender a utilizar funciones asíncronas basadas en Promises con async/await.

• Usar el API de Github para crear cliente web y visualizar la información de un usuario.

www.devcode.la

• EcmaScript es diseñado por el TC39 (Technical Committee 39)

Evolución de EcmaScript

• Compuesto por diversas compañías incluyendo creadores de navegadores.

www.devcode.la

• Evalúan y aprueban las nuevas características que se integran al lenguaje.

• Se ha estandarizado un proceso para hacer actualizaciones más frecuentes.

Evolución de EcmaScript

• Proceso de 5 etapas:

www.devcode.la

1. Stage 0: strawman

2. Stage 1: proposal

3. Stage 2: draft

4. Stage 3: candidate

5. Stage 4: finished

• https://kangax.github.io/compat-table/es2016plus/

Soporte de EcmaScript

www.devcode.la

• Array.includes

ES 2016

www.devcode.la

Permite verificar si un arreglo contiene un elemento en particular.

> ['a', 'b', 'c'].includes('a')
true
> ['a', 'b', 'c'].includes('d')
false

Funciona de manera consistente con valores como Nan, undefined, +0, -0.

• Operador de exponenciación **

ES 2016

www.devcode.la

Eleva un número x a la potencia n.

let squared = 3 ** 2; // 9

let num = 3;
num **= 2;
console.log(num); // 9

Es prácticamente equivalente a Math.pow(x, n)

• Funciones async

ES 2017

www.devcode.la

Permiten ejecutar operaciones asíncronas de forma similar al código secuencial (síncrono).

async function getData(value) {
  const res = await api(value);
  console.log(res);
}

getData('123');

Estas funciones están basadas en el API de Promises.

• Object.entries() y Object.values()

ES 2017

www.devcode.la

Permiten iterar las propiedades de un objeto obteniendo llave y valor al mismo tiempo (entries) o solo los valores (values).

const obj = {
  key1: 1,
  key2: 2,
  key5: 5,
};

Object.entries(obj); // [[key1, 1], [key2, 2], [key5, 5]]

Object.values(obj); // [1, 2, 5]

• String.padStart() y String.padEnd()

ES 2017

www.devcode.la

Permiten añadir caracteres a una cadena al principio o al final, con el objetivo de alcanzar un tamaño especificado.

const str = '123';

str.padStart(10, '*'); // '*******123' 
str.padEnd(10, '*');   // '123*******'

www.devcode.la

Características experimentales +2017

• Compilar JavaScript con Babel

www.devcode.la

Características experimentales +2017

• Decoradores

Son funciones especiales que reciben otra función y la aumentan con nuevas características.

// Decorador para mostrar los argumentos de una función
function simpleLog(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Arguments for ${name}: ${args}`);
    return original.apply(this, args);
  };
  return descriptor;
}

Conclusiones

www.devcode.la