Wextensible

Un sitio personal para aprender desarrollo web

Generadores en ES6

Código de un generador en ES6

Un generador es una función cuya ejecución puede ser pausada en un momento dado y continuada en otro posterior. En la pausa, que se produce cuando se ejecuta una expresión con yield, la función conserva su estado de variables. La pausa es, por tanto, ejecutada desde la propia función generadora con yield, mientras que la reanudación sólo puede llevarse a cabo externamente. Este comportamiento tiene tiene muchas utilidades, como la simulación de multitarea o gestionar mejor las tareas asíncronas combinando generadores y Promesas.

Iterables en ES6

Symbol.iterator en JavaScript

Los objetos iterables implementan el método Symbol.iterator. La ejecución de este método devuelve un objeto iterador que nos servirá para iterar por el objeto. En el objeto iterador siempre habrá un método next() que nos devuelve el siguiente elemento de la iteración. Los bucles for-of, el desestructurado de datos o el operador de propagación de Array se sustentan en que el objeto sobre el que se aplican sea un iterable.

Algunos objetos built-in como Array, Set, Map o arguments poseen intrínsicamente un método iterador. Además en este tema exponemos como podemos implementar un iterador particular para cualquier objeto, con lo que conoceremos cual es la finalidad de la iterabilidad y como puede ayudarnos a crear funciones iterables.

El método join() transforma un Array en un String

Los métodos de este tema transforman un Array en un valor simple devolviéndolo y no modificando el Array sobre el que actuan. Incluye los métodos antiguos join(), toString() y toLocaleString() que devuelven un String con los elementos del Array.

Más interesante son los métodos reduce() y reduceRight(). Ambos funcionan igual, sólo que el primero itera de izquierda a derecha en los índices del Array y el segundo lo hace al revés. Usa un callback para ir acumulando el resultado, por lo que es un método que tiene un gran número de aplicaciones. Como una implementación del algoritmo de exponenciación rápida, que también podemos hacer con el método reduce().

El método indexOf(valor) nos devuelve el índice

Los métodos para realizar búsquedas en un Array se pueden agrupar en tres clases. Están los que devuelven un valor booleano según encuentren o no lo que buscan, como every(), some() e includes(). Por otro lado están los que devuelven el índice del valor a buscar, con los métodos findIndex(), indexOf() y lastIndexOf().

Por último el método find() devuelve el valor que se está buscando según una condición en el callback. También funcionan con un callback los métodos some(), find() y findIndex(). El método includes() es de EcmaScript 2016 (ES7), pero ya los navegadores actuales más usados lo soportan. Haremos un ejemplo para obtener el valor de un grupo de botones de radio (<input type="radio">) usando, entre varias técnicas, el método find().

El método concat() crea un nuevo Array

Los métodos concat(), map(), slice() y filter() devuelven un nuevo Array, no modificando el Array sobre el que estén actuando. Con map() iteramos por el Array devolviendo otro Array con el mismo número de elementos, donde sus valores se establecen en una función callback. Los otros métodos, o map() cuando devuelve los valores, realizan una copia superficial del valor.

Con el método slice() haremos un ejemplo de búsqueda binaria, un algoritmo que reduce el coste de buscar un valor en un Array con un orden logarítmico.

Método para iterar por un Array

Iterar por un Array es acceder a sus elementos de forma secuencial. Los métodos key(), values() y entries() devuelven un objeto iterador que nos permitirá esa acción. El método forEach() funciona con un callback con iterando por el Array sin propósito específico.

Métodos push, pop, shift y unshift de un Array de JavaScript

Los métodos básicos para modificar un Array son pop(), push(), shift() y unshift(). Éstos agregan o eliminan elementos por la cabeza o la cola del Array. Son ideales para implementar una pila o una cola. Como ejemplo de pila implementaremos un conversor de expresiones aritméticas con notación infija a notación polaca inversa (RPN), tras lo que podremos ejecutar las expresiones con suma facilidad. Tambien hay un ejemplo de una cola para descargar archivos de imagen asíncronamente.

Otros métodos que modifican el Array sobre el que se aplican son copyWithin(), fill(), reverse(), splice() y sort(). Con el último haremos un ejemplo para ordenar una tabla por columnas.

El constructor Array de JavaScript

El constructor de Array ahora tiene dos nuevos métodos genéricos: Array.of() y Array.from(). Éste último nos permite crear un nuevo Array a partir de un iterable o de un array-like, objetos que se parecen a un array. Por otro lado comentaremos el método Array.isArray() para saber si un objeto es un Array.

A veces uno da por hecho cosas que merece la pena volver a comprobar, debido a que los navegadores son cada vez más eficientes o quizás lo que aprendimos no era del todo correcto. Como ejemplo comprobaremos si es más eficiente declarar un Array con notación literal o usando el constructor.

El Array en JavaScript implementa un vector

Un vector, formación o arreglo es una lista de elementos, cada uno con una posición o índice que nos sirve para accederlos. En JavaScript la estructura de datos que implementa un vector es el Array. Es uno de los objetos quizás con más uso y que ahora con ES6 consigue incrementar sus posibilidades. Nuevas características como el operador de propagación o el destructuring tienen una fuerte relación con los Array.

En este tema y los siguientes hago un repaso empezando por lo básico y exponiendo todos los métodos con ejemplos prácticos de uso. En este primer tema hablaremos de como agregar y eliminar elementos en un Array. También se exponen muchas de las formas posibles de iterar por un Array.

Symbol.iterator, un símbolo bien conocido en JavaScript

ES6 utiliza los símbolos para incorporar los Well-Known Symbols. Son los Símbolos Bien Conocidos que nos permiten cambiar la forma de actuar predeterminada de ciertas características internas de JavaScript. Por ejemplo, Symbol.iterator nos da la facilidad de hacer iterable un objeto, pues podemos asignar a ese símbolo un método iterador basado en una una función generadora.

Símbolos en ES6

string, number, boolean, null, undefined y symbol

ECMAScript 6 (ES6) introduce los símbolos con el nuevo tipo de datos primitivo symbol. Su característica principal es que pueden actuar como identificadores, que por su naturaleza deben ser únicos e inmutables. En esta serie de dos temas intentaremos ver qué son y para qué se utilizan.

Los símbolos se pueden usar para agregar nuevas propiedades a un objeto con la total seguridad de que no vamos a sobrescribir una propiedad existente. Esto es así por el carácter de únicos que tienen los símbolos.

Esquema del desestructurado (destructuring) de un Array en EcmaScript 6 (ES6)

El desestructurado de datos (destructuring) de EcmaScript 6 (ES6) es una nueva característica que nos permite extraer datos individuales desde una estructura de datos usando sólo una sentencia. Podemos desestructurar Arrays y objetos en aquellos lugares donde se produzca una asignación de valores, como las propias expresiones de asignación, en los parámetros de una función cuando se ejecuta la llamada o en bucles for...of. En este tema expondremos la sintaxis con Arrays y objetos, con muchos ejemplos de uso.

Código que representa las funciones flecha (Arrow Functions) de JavaScript

ECMAScript 6 (ES6) introduce las funciones flecha (arrow functions) que son una sintaxis para representar funciones anónimas fijando las referencias arguments, this, super y new.target de forma estática al alcance de la función. Para las funciones que ya conocemos estas referencias se resuelven de forma dinámica, con lo que su valor no existirá hasta que la función se ejecute. Esto es un problema en muchos casos, como cuando adjudicamos eventos a elementos HTML, puesto que en la función manejadora se resolverá el this al elemento sobre el que actúa el evento.

Propiedad 'arguments', 'caller' y 'callee' de una función en JavaScript ES6

Las funciones en JavaScript también son objetos y por tanto pueden tener propiedades y métodos. Con ECMAScript 6 (ES6) se incorpora la nueva propiedad name que contiene el nombre de la función. La propiedad arguments contiene los argumentos recibidos en la llamada a una función. Es importante entender la diferencia entre parámetros y argumentos de una función y como se comportan en JavaScript. Especialmente conviene saber que los argumentos se pasan por valor, incluso cuando son objetos, pues se pasa el valor de la referencia al objeto. Podría asimilarse a un paso por referencia para los objetos, pero si éste es reasignado en el destino esa referencia se rompe.

ES6 incorpora mejoras como los parámetros por defecto, la sintaxis para el resto de parámetros, y el operador de propagación. Veremos para que sirven caller y callee advirtiendo que el modo estricto prohíbe su uso. Por último se exponen ejemplos de uso de los tres únicos métodos de una función: call(), apply() y bind().

Funciones en JavaScript ES6

Las funciones en JavaScript son de primera clase pues pueden pasarse en los argumentos y devolverse desde otra función. Esto junto a características como el anidamiento de funciones o las funciones anónimas le da un carácter de lenguaje funcional con el que se pueden hacer más cosas de las que pudiéramos suponer en principio. De hecho si no las conocemos en profundidad nos perderemos un montón de posibilidades que mejorarían sensiblemente nuestras aplicaciones.

EcmaScript 6 (ES6) incorpora novedades importantes relacionadas con las funciones, como los argumentos por defecto, el operador para indicar resto de argumentos, las funciones flecha y los generadores. Pero antes de meterme con eso quiero hacer un repaso general de las funciones. Y de eso va este tema, empezando por descubrir que las funciones están detrás de todas las variables en JavaScript, diferenciando entre declaraciones y expresiones de función, y finalizando con ejemplos donde se evidencia la utilidad de las funciones.

Template literal en JavaScript ES6

Hasta ahora podíamos presentar una declaración literal de un string usando comillas simples o dobles, indistintamente. Ahora con EcmaScript 6 (ES6) podemos también usar el caracter acento grave para encerrar una declaración literal denominada literal de plantilla (template literal).

Una de sus características es que nos permite presentar saltos de línea tal como los escribimos en el código. Pero su particularidad más importante está en el uso de las plantillas, que a modo de código embebido o interpolado facilita la representación de cadenas combinadas con expresiones.


...Ver más en el histórico