JavaScript — ES7 (ECMA2016)

Temario

• Introducción
• Nuevas Característica
  • Array.prototype.includes
  • Potenciando números (**)

i. Introducción

Recordando la story JavaScript — Historia, Estándar & Motores [ref], sabemos que ECMA es el organismo encargado de crear el estándar ECMAScript donde a partir de Junio 2015 decide homologar el nombre agregando el prefijo ES y el año en que ha sido lanzada la edición, ej. ES2015 (ES6).

En las stories pasadas vimos las nuevas funcionalidades y mejoras que traía la edición ES2015 (I[ref], II[ref],III[ref],IV[ref],V[ref]). En esta entrega vamos a revisar la edición ES7 (ECMA2016), aunque no incluye tantas novedades cómo la edición pasada, sí han agregado características bastante útiles.

Importante: Hay que tener en cuenta que es posible que NO TODOS los navegadores modernos admitan estas “nuevas” funcionalidades, por lo que te sugiero primero validar las versiones de los mismos antes de subir a producción. Si estas usando algún transpilador (ej. Babel) no deberás preocuparte.

ii. Nuevas Características

01. Array.prototype.includes [ref]

Determina si una matriz incluye un valor determinado dentro del arreglo, devuelve el booleano true (si encuentra el valor), false(no encuentra el valor).

Sintaxis —

Donde:

• arr[Obligatorio]— Es una variable de tipo array.
• searchElement[Obligatorio]—El valor a buscar.
• fromIndex[Opcional] — La posición del arreglo en la que debe comenzar a buscar.

Ejemplo 1 —

Podemos observar que:

• En la línea 3 se busca Costa Rica dentro del arreglo y en este caso regresa true ya que si encuentra el valor.
• En la línea 4 se busca Costa rica dentro del arreglo y en este caso regresa false ya que la búsqueda sí distingue de minúsculas y mayúsculas.
• En la línea 5 se busca Brasil dentro del arreglo y en este caso regresa false ya que el valor NO encuentra dentro del arreglo.
• En la línea 7 se busca Guatemala pero a partir de la posición 3 es decir de Argentina en adelante, en este caso regresa true ya que sí encuentra el valor.
• En la línea 8 se busca Perú pero a partir de la posición 3 es decir de Argentina en adelante, en este caso regresa false ya que el valor que buscamos está en la posición 2.

Ejemplo 2 —

Donde:

• En la línea 3 se busca 🇵🇪 dentro del arreglo y en este caso regresa true ya que si se encuentra el valor.
• En la línea 4 se busca 🏴‍☠️ dentro del arreglo y en este caso regresa false ya que NO encuentra el valor.
• En la línea 5 se busca 🇵🇦 dentro del arreglo pero a partir de la posición -10, cuando el índice calculado es menor o igual a -1 * arr.length se buscará en todo el arreglo, en este caso regresa true ya que si encuentra el valor en el arreglo.

Si quieres buscar dentro de un arreglo de objetos, te recomiendo usar some() [ref] o filter() [ref].

Podemos observar que some() regresa true o false (dependiendo si lo encuentra o no el valor), mientras que filter() regresa un arreglo con o sin datos (dependiendo si lo encuentra o no el valor).

Soporte [ref]—

No olvidemos que… —

• Este método es sensible a mayúsculas y minúsculas.
• Regresa siempre un booleano.
• Es útil para buscar valores de tipo primitivo.
• No se recomienda para buscar dentro de un arreglo de objetos.

02. Potenciando números (**) [ref]

JavaScript nos permite elevar una base a una potencia con Math.pow(base, exponente)

En ES7 JavaScript nos proporciona el operador de exponenciación ** que funciona de manera similar a Math.pow

Sintaxis —

Donde:

• base [obligatorio] — Número base
• exponente [obligatorio] — Exponente utilizado para elevar la base

Ejemplo 1 —

Donde:

• La línea 1 retorna la base (12) elevada al exponente (4)
• La línea 2 retorna la base (3) elevada al exponente (3)

En la definición de arriba mencione lo siguiente:

funciona de manera similar a Math.pow

Digo de manera similar ya que el operador de exponenciación ** tiene algunas diferencias con Math.pow() :

• El operador ** es asociativo de derecha a izquierda

• El operador ** no permite colocar un operador unario (+/-/~/!/delete/void/typeof) inmediatamente antes de la base, ya que eso causará un SyntaxError

• El operador ** acepta BigInt como operandos

No voy a tocar (por ahora) el tema de BigInt, ya que es de ES10 (ES2020), pero es bueno conocerlo desde ahorita.

Soporte [ref] —

No olvidemos que… —

• Es una alternativa a Math.pow
• Soporta números bastantes grandes (BigInt)
• El operador ** es asociativo de derecha a izquierda

Bibliografía y links que te puede interesar…

JavaScript — Historia, Estándar & Motores

JavaScript — ES6 (Parte I)

JavaScript — ES6 (Parte II)

JavaScript — Symbols & Generadores ES6 (Parte III)

JavaScript — Map, Set, Proxy, Reflect & Export modules ES6 (Parte IV)

JavaScript — Class ES6 (Parte V)

Array.prototype.includes() - JavaScript | MDN

Exponentiation (**) - JavaScript | MDN