Leonardo Galante

Desarrollador Front-end 💻

Auth0 Ambassador 👨‍🚀

Profesor en Plataforma5 y CoderHouse 👨🏼‍🏫

Co-organizador en freeCodeCampBA y JS101 🎬

ES2016/2017

Pasado ya dos años desde ES2015 recapitulemos las features que nos ha dejado los ultimos specs de ECMAScript

ES2015 ó ES6

Te quedaste atrás?! Doesn't matter 😎

ES2016 ó ES7

1. Array.includes()
2. Operador de Potenciación (**)

Array.includes()

Nos devuelve un booleano si nuestro array incluye cierto elemento

Soporte en Tabla Kangax

Sintáxis

  array.includes(elementoBuscado, desdeIndice)

  // Siendo el parámetro "desdeIndice" opcional

Buenas 😻

• Amplio soporte en distintos entornos
• Ya no tenemos que usar .indexOf()
• Ya no dependemos de _.includes() de Lodash
• Podemos usarlo también para los strings
• Usa el algoritmo de comparación SameValueZero,
  lo cuál podemos buscar por NaN

Malas 😿

• No podemos pasarle un objeto como parámetro ya que compara por referencia y no por por valor
• Solo podemos pasar como parámetro strings y numbers

Constraints 🙀

• Si pasamos un índice igual o mayor que el tamaño del array nos devuelve false
• Si pasamos un índice negativo se buscará en todo el array

Operador de Potenciación (**)

Nos devuelve el resultado de realizar la operación de potenciación

Soporte en Tabla Kangax

Repaso de Matemáticas 📏

base^exponente

Tres al cuadrado
$3 ^ 2 = 3 * 3 = 9$

Tres al cubo
$3 ^ 3 = 3 * 3 * 3 = 27$

Sintáxis

// base ** exponente
const tresAlCuadrado = 3 ** 2
console.log(tresAlCuadrado) // => 9

Buenas 😻

• Amplio soporte en distintos entornos
• Ya no tenemos que usar Math.pow()
• Sintáxis idéntica a otros lenguajes como Python, Ruby, etc

Malas 😿

• undefined

Constraints 🙀

• El operador ** es asociativo por derecha, es decir

  2 ** 3 ** 2 = 2 ** (3 ** 2) = 2 ** 9 

• No podemos usar el operador - inmediatamente antes de la base

  -2 ** 2    // Expresión inválida
  -(2 ** 2)  // Expresión válida
  (-2) ** 2  // Expresión válida

ES2017 (ES8) Features

1. Object.values()
2. Object.entries()
3. String.padStart()
4. String.padEnd()
5. Async/Await

Object.values()

Nos devuelve un array con todos los valores de las propiedades de un objeto

Soporte en Tabla Kangax

Sintáxis

  Object.values(objeto)

Buenas 😻

• Amplio soporte en distintos browsers
• Ya no dependemos de _.values() de Lodash
• Parámetros que no sean objetos serán convertidos

Malas 😿

• No hay soporte para Node.js < 7
• Usar Babel para soportar entornos más viejos

Constraints 🙀

• undefined

Object.entries()

Nos devuelve un array de arrays donde este último es [clave, valor]

Soporte en Tabla Kangax

Sintáxis

  Object.entries(objeto)

Buenas 😻

• Amplio soporte en distintos browsers
• Ya no dependemos de _.toPairs() de Lodash

Malas 😿

• No hay soporte para Node.js < 7
• Usar Babel para soportar entornos más viejos

Constraints 🙀

• undefined

String.padStart() y String.padEnd()

Nos rellena al inicio o al final de nuestro string con otro string hasta alcanzar la longitud deseada

Soporte en Tabla Kangax

Sintáxis

  str.padStart(longitudFinal, stringDeRelleno)
  str.padEnd(longitudFinal, stringDeRelleno)

Buenas 😻

• Amplio soporte en distintos browsers
• Ya no dependemos de left-pad() de Steve Mao

Malas 😿

• No hay soporte para Node.js < 7
• Usar Babel para soportar entornos más viejos

Constraints 🙀

• Si el parámetro longitudFinal es menor a la longitud del string, este último no se modificará
• Si no le pasamos el parámetro stringDeRelleno este será un espacio vacío ' '

Async/Await

Nos permite manejar llamadas asincrónicas de manera sincrónica

Soporte en Tabla Kangax

Sintáxis Async

// Declaración de función
  async function getDogData() {
  }

// Arrow function
  const getDogData = async () => {
  }

1. Declara nuestra función como asincrónica
2. Convierte la función en una Promise
3. Nos permiten el uso de await

Sintáxis Await

  async function getDogData() {
    try {
      const res = await fetch('https://dog.ceo/api/breeds/list/all')
      const json = await res.json()
      return { json }
    } catch (error) {
      console.log(error)
    }
  }

1. Cuando usamos await antes de una Promise frena la ejecución del código hasta que esta sea resuelta
2. Await solo funciona con Promises y no con callbacks
3. Solo puede ser usado dentro de las async functions

Buenas 😻

• Al funcionar por encima de Promises podemos seguir usandolás
• No tenemos que usar ninguna librería externa para manejo de asincronismo o otras soluciones nativas como Generators
• Top-level await en las herramientas de desarrollador de Google Chrome 62
• Finally en Google Chrome 63 para realizar una acción cuando termine de ejecutarse una Promise

Malas 😿

• No hay soporte para Node.js < 7
• Usar Babel para soportar entornos más viejos

Constraints 🙀

• Aprender primero Promises ya que async/await funciona por encima de estas
• No son un reemplazo a estas últimas