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 😎

Modern JavaScript Cheatsheet

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 📏

baseexponente

Tres al cuadrado
32=3∗3=93 ^ 2 = 3 * 3 = 9

Tres al cubo
33=3∗3∗3=273 ^ 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