JavaScript — ES6 (Parte II)
Temario
- Introducción
- Nuevos métodos (repeat, startsWith, endsWith, includes, Number.isNaN, Number.isFinite)
- Nuevos métodos para Math (trunc, log10 y log2, tanh, acosh, asinh, hypot, sign, fround)
- Nuevos operadores (**)
- Extraer valores (Object.keys)
- Templates tags
ii. Nuevos métodos
Desde la edición de ECMAScript2015 se han ido agregando métodos que como desarrolladores agradecemos mucho, ya que son bastante útiles al momento de programar.
a — repeat
Este método es bastante útil cuando queremos repetir n veces algún dato de tipo string, veamos cómo funciona:
Es importante que sea cadena, ya que de lo contrario marcará un error.
b — startsWith
Este método nos ayuda a saber si alguna cadena inicia con una o más letras, veamos el siguiente ejemplo:
Otra ventaja que tiene es que le podemos indicar a partir de qué posición debe buscar:
A partir del número que le indicamos, va a comenzar a buscar.
c — endsWith
Este método nos ayuda a saber si alguna cadena termina con una o más letras, veamos el siguiente ejemplo:
Al igual que el método startsWith, tiene la ventaja de indicarle a partir de qué posición (hacia atrás) debe buscar:
A diferencia del método startsWith, el método endsWith busca a partir del número indicado -1, esto quiere decir que si queremos validar mundo, debe posicionarse en el 10 (10–1 = 9, es donde va a iniciar a validar).
d —includes
Cuando queremos buscar en una cadena, sin importar si se encuentra al principio o al final, ocupamos el método includes, veamos el siguiente ejemplo:
Otra ventaja que tiene es que podemos buscar dentro de un arreglo, solo hay que tener cuidado, ya que ahí sí debe poner cadena entera, ya que de lo contrario regresará false
e — Number.isNaN
Antes de ES6 había forma de validar si el número era finito o un valor que no puede ser representado con números reales [ref — Ver NaN].
Importante: No confundir Number.isNaN() con isNaN(), ya que ambos hacen dos cosas totalmente diferentes y arrojan resultados también diferentes
Veamos el siguiente ejemplo:
Recordemos que isNaN hace coerción[ref], esto quiere decir que si nuestro argumento coacciona a NaN va devolver true, para todos los demás false.
Entonces lo que está haciendo realmente es lo siguiente:
Mientras que Number.isNaN, verifica que si su argumento es NaN y es de tipo numérico (NO coacciona).
Veamos varios ejemplos:
f — Number.isFinite
El método Number.isfinite nos es útil, para saber si el número es un número finito, veamos el siguiente ejemplo:
Importante: No confundir Number.isFinite() con isFinite(), ya que ambos hacen dos cosas totalmente diferentes y arrojan resultados también diferentes
Veamos el siguiente ejemplo:
Si has comprendido el isNaN, debes saber lo que está pasando en nuestro ejemplo anterior…
Recordemos que isFinite hace coerción[ref], esto quiere decir que si nuestro argumento coacciona va devolver true.
iii. Nuevos métodos para Math
Math es un objeto incorporado que tiene propiedades y métodos para constantes y funciones matemáticas. No es un objeto de función. [ref]
En ES6 se agregaron nuevos métodos…
a — Math.trunc
Ahora podemos truncar un número de manera nativa, veamos un ejemplo en ES5:
Ahora solo basta invocar Math.trunc para obtener el mismo resultado:
b —Math. log10 y Math.log2
Ahora podemos convertir de manera sencilla a un logaritmo de base 10 (Math.log10)[ref] o base 2 (Math.log2)[ref], veamos los siguientes ejemplos:
c —Math.tanh, Math.acosh, Math.asinh, Math.hypot
- Con el método Math.tanh[ref], podemos obtener la tangente hiperbólica de un número real x[ref].
- Con el método Math.acosh[ref], podemos obtener la coseno hiperbólico de un número real x[ref].
- Con el método Math.asinh[ref], podemos obtener la arcoseno hiperbólico de un número real x[ref].
- Con el método Math.hypot[ref], podemos obtener la raíz cuadrada de la suma de los cuadrados de los argumentos proporcionados.
Veamos ejemplos de cada uno de ellos:
d — Math.sign
Esta función nos va a devolver:
- 1 Cuando el número es positivo
- -1 Cuando el número es negativo
- 0 Cuando el número es 0
- -0 Cuando el número es -0
- NaN Para todo lo demás
e — Math.fround
El método Math.fround, es muy útil cuando queremos que de un número x, nos regrese la representación de punto flotante de precisión simple de 32 bits[ref].
iv. Nuevos operadores
a — Operador **
El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia[ref]
Este operador es exactamente lo mismo que Math.pow(x, y); pero digamos que ahora se ve más limpio, veamos un ejemplo:
Importante: En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (+/-/~/!/delete/void/typeof) inmediatamente antes del número de base.
Esto quiere decir que si hacemos -2**2 nos va arrojar un error, por lo que debemos de ponerlo entre paréntesis -2(2**2).
v. Extraer valores
a — Object.keys
Object.keys devuelve un array cuyos elementos son de tipo string correspondientes a las propiedades enumerables que se encuentran directamente en el object, el orden de las propiedades es el mismo que se da al iterar sobre el objeto.
Antes de ES6 no había forma nativa para obtener las claves de un objeto, si se que puede leerse raro, pero no la había; por fortuna se agregó en la edición de ES2015, y funciona de la siguiente manera:
Ejemplo para los arreglos:
Cuando se ejecuta el método contra un arreglo, Object.keys devuelve los índices ordenados de cada elemento contenido en ella.
Un ejemplo con objetos:
Podemos observar que se comporta de la misma manera como si fuera un arreglo, devuelve los índices enumerables de forma ordenada.
Veamos otro ejemplo con objetos:
Podemos observar que sigue ordenando, ya que su índice es enumerable, veamos que pasa si es un tipo string:
Al ver el código nos damos cuenta que no lo ordena, y los regresa tal cual nosotros lo tenemos, ya que sus índices no son enumerables, por lo que es muy importante tener este pequeño detalle al momento de utilizar Object.keys
vi. Template tags
Sabemos que las plantillas[ref] van con `` (comilla invertida), veamos un ejemplo:
Las literales de plantilla nos da la opción de poder etiquetarlos, esto quiere decir que a través de una función podemos ejecutar una literal de plantilla y en lugar que el navegador asigne de manera inmediata los valores, vamos a poder tener el control sobre la plantilla.
Podemos decir que son funciones comunes y corriente, pero la forma en que se invocan y se obtienen los datos es un poco diferente (sí, pero ¿como?).
Podemos observar que en vez de llamar la función highlight(), lo hacemos de la siguiente manera highlight``, donde le mandamos nuestra plantilla, todo lo que hagamos dentro de la función va afectar.
Ahora que hemos comprendido, vamos a lo interesante… la función dos parámetros:
- El primer parámetro va recibir una matriz de la cadena (digamos que es el contenido estático)
- El segundo parámetro va a recibir los valores
Veamos el ejemplo:
Podemos observar que separa el contenido estático y las variables, por lo que si lo intercalamos obtendremos toda la plantilla.
Veamos como quedaría si juntamos todo:
Podemos observar que al final sale un undefined, es normal que salga, ya que el arreglo de la plantilla siempre va a ser mayor al arreglo de variables, así que hagamos una pequeña validación en nuestra función:
Ahora imaginemos que queremos resaltar todas las variables; lo haremos embebiendo la variable en un <span> y le agregaremos una clase.
Nuestro código JavaScript, quedaría de la siguiente manera:
Veamos el ejemplo, completo con CSS y HTML (no olvides darle al botón verde de play):
Veamos un ejemplo más avanzado:
Ejemplo 2: Imaginemos que consumimos una API, donde nos trae el perfil de un actor, y queremos llenar esos datos en nuestra plantilla:
Nuestro data que recibimos:
Nuestra plantilla va a ser la siguiente:
Vamos a crear una closure (que ya vimos anteriormente[ref]), donde primero le vamos a pasar el template, y después los datos para que los recorra y lo cambie:
La forma de ejecutarlo, va a ser la siguiente:
Veamos el código completo(no olvides darle al botón verde de play):
Nota: Por ahora no nos importa entrar en detalle con CSS, por lo que he tomado de este tutorial [ref] la card (más adelante veremos CSS).
Esta forma de trabajar es muy común en librerías de terceros, por ejemplo en React style-components[ref].
En la siguiente entrega vamos a ver JavaScript — ES6 (Parte III)
La entrega pasada vimos JavaScript — Callbacks y Promises
Bibliografía y links que te puede interesar…
