En 2016, el majo de Matt Mullenweg nos dijo:
Voy a poneros deberes: estudiad JavaScript en profundidad (…) porque es el futuro de la web.
Matt Mullenweg (en YouTube)
No sé si le hiciste caso en su día o no, pero está claro que ya no puedes posponerlo más. La llegada a WordPress del editor de bloques ha forzado que muchísimos desarrolladores se pongan las pilas. JavaScript está cogiendo cada vez más peso dentro de WordPress y, si no queremos quedarnos atrás, debemos mejorar nuestras habilidades con este lenguaje.
En el pasado escribí una entrada de toda la potencia que tiene JavaScript a pelo, sin librerías como jQuery. Hoy quiero ir un paso más allá y explicarte algunas de las novedades que hay en las nuevas versiones de JavaScript y que resultan chocantes la primera vez que las ves. Creo que es importante que las conozcas, porque estarán en todos los proyectos JavaScript que veas de ahora en adelante (incluyendo, ¿cómo no?, Gutenberg).
#1 – Destructuración de objetos y arrays
Empecemos por algo sencillo. Supongamos que queremos ver cómo funciona la interfaz de edición de un párrafo en Gutenberg. Para ello, tenemos que ir a estudiar el método edit del bloque correspondiente. En este caso, tenemos que de ese método se encarga un componente llamado ParagraphBlock y la parte que nos interesa es su método render. Pues bien, lo primero que vas a encontrarte en la línea 127 es esto:
¿Qué es todo esto? Bueno, empecemos por algo más fácil. Supongamos que tienes un objeto como el siguiente:
La destructuración de objetos y arrays te permite definir una o más variables del tirón cuyos valores son los atributos del objeto que asignamos. Aquí lo ves con un ejemplo:
Con una sola instrucción, conseguimos recuperar el id, title y content de nuestro post. Y esto es precisamente lo que estaba haciendo Gutenberg en el fragmento que he puesto al principio: recuperar el objeto attributes, la función setAttributes, el atributo isRTL, etc. del objeto this.props.
Un poco más confuso, aunque igualmente interesante, es la posibilidad de extraer atributos de objetos anidados. Es decir, partiendo de un objeto tal que así:
podemos recuperar valores que cuelgan directamente de post o valores que están dentro del atributo author, como id o name.
Si te fijas, cada vez que destructurizamos un objeto, la variable que creamos tiene el mismo nombre que el atributo dentro de dicho objeto. Esto supone algunas complicaciones: ¿qué pasaría si queremos recuperar el id de la entrada y el id del autor de una tirada? En ambos casos tenemos que el atributo se llama id, así que en principio parece que no es posible…
La solución está en los alias:
Es decir, podemos especificar qué atributo queremos recuperar del objeto (por ejemplo, author.id) y cuál es el nombre que queremos dar a la variable que lo contendrá (authorId).
Finalmente, comentarte que la destructuración de objetos es algo que también podemos hacer con arrays:
o que incluso podemos hacer al definir los parámetros de una función. Si sabemos que alguno de los parámetros de la función va a ser un objeto o un array, lo podemos destructurizar en la propia definición de la misma:
#2 – Funciones con flecha
Otro ejemplo bastante habitual. Si echas un vistazo a las leyendas de los bloques imagen de Gutenberg, verás lo siguiente en la línea 693 del método edit:
¿Qué es el value entre paréntesis? ¿Por qué hay una flecha? ¿Qué es eso de setAttributes con llaves dentro? ¡No entiendo nada!
Bueno, vamos a empezar por lo más fácil. Cuando veas una flecha del tipo => tienes que saber que estás delante de una función con flecha, como las que siempre has definido usando function. La sintaxis es prácticamente igual a la de siempre, simplemente cambias la palabra clave function por la flecha =>:
Ahora bien, la ventaja de las funciones con flecha es que se pueden simplificar aún más, haciendo el código más compacto. Por ejemplo, si nuestra función tiene una única instrucción, podemos ahorrarnos las llaves y la palabra clave return, ya que el resultado de evaluar la única instrucción es lo que devolveremos por defecto:
Otra simplificación que podemos realizar son los paréntesis. Si estamos escribiendo una función que tiene un único parámetro, los paréntesis pasan a ser opcionales:
#3 – Operador de propagación y operador de resto
Seguimos explorando el bloque de párrafos y dejándonos maravillar por su sintaxis. Por ejemplo, fíjate en la fiesta que tenemos montada en la línea 64:
¿Qué rayos es esto?
En este caso estamos ante el operador de propagación, es decir, los tres puntos .... El spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).
Vamos a empezar por el ejemplo más sencillo. Supongamos que tenemos un array con un cierto número de elementos y queremos meterlo dentro de otro array. Esto lo podemos conseguir así:
Con él, lo que estamos haciendo es «expandir» (de ahí que el operador, en inglés, se llame spread) los elementos de un array dentro de otro.
De igual forma, podemos realizar esto con objetos:
Ahora bien, fíjate en el siguiente ejemplo (que es una copia del ejemplo de Gutenberg con el que hemos abierto esta sección):
Si estoy expandiendo dos objetos que tienen propiedades en común, el objeto resultante contendrá la unión de propiedades de ambos objetos y, para toda propiedad «repetida», contendrá el valor del objeto de la derecha. Así, por ejemplo, el atributo title que se repite en ambos objetos, contiene el valor del objeto newAttributes, mientras que los demás atributos (author por un lado y words por el otro) aparecen en el resultado con los únicos valores que podrían contener.
#4 – Plantillas de cadena de texto
Otra novedad que tenemos ahora en JavaScript son las plantillas de cadena de texto. Un ejemplo lo podemos ver en el fichero index.js del bloque de párrafos, en la línea 133:
A partir de aquí, podemos complicar las cosas tanto como nos plazca. Fíjate, por ejemplo, en lo que aparece justo a continuación del bloque de párrafos, en la línea 136:
Las plantillas de cadena de texto nos permiten formatear cadenas de texto incrustando valores dinámicos intercalados. Es decir, en lugar de tener que ir concatenando fragmentos de una cadena de texto con variables o expresiones JavaScript, ahora podemos incrustar dichas variables o expresiones en la propia cadena:
¿Qué estaba pasando en el segundo ejemplo? Pues básicamente estamos creando un objeto con propiedades cuyos «nombres» son dinámicos (y algunos de los cuales, por cierto, se generan usando las plantillas de cadena de texto). Veámoslo con un ejemplo más breve:
En lugar de tener que definir el objeto primero y luego ir metiendo las claves y sus valores usando la notación de array, podemos hacerlo todo en el momento de la propia definición del objeto.
Nelio Forms
Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.
Wajari Velasquez
#5 – Olvídate de los for y los while
Finalmente, me gustaría cerrar la entrada de hoy con un par de funciones que son muy, muy útiles para trabajar con arrays y con las que deberías estar ya familiarizado. Ambas las podemos encontrar, por ejemplo, en el bloque de columnas de Gutenberg. Efectivamente, estoy hablando de map (por ejemplo, línea 136) y de reduce (línea 119). Vamos a ver para qué sirve cada una de ellas y cómo puedes usarlas.
El método map crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos:
Básicamente, es un método que recorre todos los elementos de un array (lo que viene siendo el for), aplicándoles una función (lo que sería el «cuerpo» del for clásico).
El método reduce es muy parecido al método map, pero en lugar de devolver un array cuyos elementos son el resultado de aplicar una función a los elementos originales, devuelve un único valor. Es decir, se trata de un método que permite aplicar una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor. Por ejemplo:
Resumiendo
Como ves, las nuevas versiones de JavaScript añaden construcciones que permiten escribir código de forma más eficiente y cómoda, pero usando una sintaxis que puede resultar confusa al principio. Espero que la entrada de hoy te haya ayudado a entender qué hay de nuevo en JavaScript y cómo usar sus nuevas estructuras y funciones.
A mí me gusta mucho la forma que está cogiendo JavaScript y me parece que permite escribir código mejor y más legible (una vez lo sabes leer, claro). ¿Tú qué opinas? Después de leer esta entrada, ¿estás ya con ganas de «aprender JavaScript profundamente» de una vez por todas?
Imagen destacada de Ross Findon en Unsplash.
Deja una respuesta