🖖 Inicio

SERVICIOS

Salir

nochedía

Elementos Básicos 2

1600 palabras
6 minutos
May 2, 2020

Los elementos básicos 2

Loops

Seguimos con los loops, funciones para iterar sobre estructuras como arrays o objects

Hay bastantes maneras de iterar y algunas redundantes, además es factible esquivar algunas opciones por no necesitarlas así que en lugar de mencionarlas todas hablaré de las más útiles en mi opinión y que al menos por ahora nos serán más que suficientes

for..in y for..of

Loops imperativos que nos permiten iterar estructuras iterables o no

Recuerda que los objects no son iterables

Lo haremos con un array y con un object, y al igual que antes los paréntesis son opcionales si sólo hay una instrucción dentro del loop, así que yo no los pongo

Como ves, el for..in nos sirve para iterar tanto Arrays como Objects, mientras que el for..of no sirve con objects al no ser estos estructuras iterables

Pero lo cierto es que técnicamente, si quiero utilizar el for..in con Objects tendría que asegurarme que las propiedades sobre las que itero son realmente propiedades de ese objeto (y por ejemplo no son heredadas)

Tendría que escribir lo siguiente:

Este obj.hasOwnProperty(prop) dificulta la lectura pero lo necesitamos por lo que he dicho arriba

Si nos fijamos, el operador lógico && nos permite escribir una única línea y seguir sin utilizar paréntesis en el loop

Normalmente el obj.hasOwnProperty(prop) no lo necesitaríamos si no tocamos el padre del objeto, que en este caso sería tocar su prototype, así que en la mayoría de veces podemos escribir el código original sin problemas

Pero al final son buenas prácticas incluir esa comprobación siempre, lo que resulta algo ofuscado

Y por otro lado tenemos el for...of que no es aplicable a los objetos, o sí lo es si hacemos lo siguiente:

Con Object.keys() lo que hacemos es sacar un array de las propiedades del objeto, podemos hacer lo mismo con los valores y con las parejas de propiedad-valor con la ventaja de no tener que hacer la comprobación anterior:

Nota adicional: Fijaros que puedo utilizar los mismos nombres de variables sin problema en las tres declaraciones de los loops, es decir, utilizo el nombre el tres veces aún siendo constante

Esto es así porque definimos const el dentro del bloque for, y es en ese bloque que el existe, una vez fuera del bloque el deja de existir y por tanto puede volverse a declarar sin tener ninguna colisión de nombres

Otra nota adicional: Cómo es que podemos utilizar const con la variable el si esa variable cambiará a cada iteración?

La pregunta es muy relevante, no debería funcionar el código anterior y sin embargo funciona

La razón es porque mientras que si utilizáramos un loop for clásico esto efectivamente sería así y no funcionaría, los loops for..of y for..in funcionan internamente distinto y a cada iteración crean una nueva variable el a la que no le cambiarán el valor

Y dicho esto, toca mencionar el destructuring, algo que puede costar de entender al principio pero que luego es una herramienta terriblemente potente (y reciente)

Fijaros en este código

El segundo loop resulta más cómodo y más rápido de leer ya que desestructuramos el objeto que nos da Object.entries() directamente

El código sería lo mismo que hacer lo siguiente, pero mucho más conciso

De momento sólo quédate con la idea, este tema merece más tiempo porque su uso está muy extendido, pero para el curso que nos ocupa nos quedamos aquí

forEach

Ésta es la versión declarativa de los loops, y al igual que antes sólo funciona con iterables

Con cada iteración tenemos una función que recibe el argumento el, que es un poco lo mismo que hemos visto antes pero ahora podemos ver la función de forma literal mientras que antes estaba "escondida"

Lo importante es lo declarativo de la función, lo primero que leemos es que vamos a hacer algo con las entries de obj, y luego vemos que será un forEach

Esta manera de escribir el loop es sin embargo farragosa y tenemos otra manera equivalente y mucho más simplificada

E incluso más concisa

Se llama notación fat arrows y te hablo de ella en un momento

Con estos loops podemos hacer cosas como las siguientes, que no es más que generar un nuevo objeto a partir de un objeto previo

Bueno, antes sí que podíamos pero era enteramente imperativo, ahora con forEach podemos hacerlo de forma declarativa

Pero da igual porque el ejemplo anterior no funciona, y por qué?

No funciona porque forEach() no devuelve valores, pero tenemos a map() que es idéntico a forEach() y que además sí que devuelve valores

Podemos escribirlo con map() (lo vemos en un momento), o con forEach() del siguiente modo:

Fíjate que este código está modificando el objeto original y genera un nuevo objeto (como hacíamos antes)

Esto vulnera lo que se llama principio de immutabilidad, uno de los principios que sigue la programación funcional junto con el de utilizar expresiones declarativas, y este principio entre otras cosas promete reducir el número de errores que podamos generar

Para hacerlo podríamos simplemente construir un nuevo objeto en lugar de cambiar el original, pero podemos hacerlo más sencillo con map()

map

La diferencia con forEach() es que map() devuelve valores, y si no especificas cuales con return pues devolverá el último valor

Podríamos intentar lo siguiente:

Fíjate que al igual que antes, cuando especifico el objeto estoy poniendo prop sin comillas y sin embargo JavaScript no busca la variable prop sino que lo interpreta como texto. Si quisiésemos utilizar una variable deberíamos escribir [prop] (lo verás en los siguientes ejemplos)

Con este ejemplo vemos que no ha funcionado lo que buscábamos ya que tenemos que newObj tiene una estructura distinta

El problema es que con cada iteración que hago con map() estoy devolviendo un objeto, pero lo que devuelve Object.entries() es un array con lo que mi objeto está dentro de ese array

En este caso no podríamos generar un nuevo objeto con map(), pero nos ha quedado claro para qué sirve tanto forEach() como map(), y si bien puede que no les veas utilidad, la tienen por ejemplo cuando hay que convertir objetos de datos en html en componentes de React (que ya lo veremos en otros cursos)

Como curiosidad, esta copia del objeto podríamos hacerla con reduce(), pero esto escapa de este curso y queda pendiente para más adelante

Vamos a ver un ejemplo con map() para generar html como te he dicho antes:

Y si queremos desestructurar, sería de la siguiente manera

No estoy explicando la desestructuración en detalle, pero así vas acostumbrando la vista

Funciones

Las funciones nos sirven para encapsular y aislar partes de código para facilitar así la lectura, y si aplica poder re-utilizar ese código en concreto

Se las puede encapsular en objetos (les podemos llamar métodos) o en módulos o en complementos, pero siguen siendo funciones

La sintáxis es simple

Podemos encapsular la función en una variable, el resultado es el mismo pero la lectura mejora

Y podemos utilizar las fat arrows, el resultado sigue siendo el mismo pero la lectura mejora aún más

Los paréntesis del argumento (formal) se pueden omitir cuando sólo hay una variable, y los otros tampoco hacen falta al haber sólo una expresión

Mucho más conciso

Ojo porque lo que acabamos de escribir está muy cerca de ser un componente en React, allí la norma es que los componentes empiecen con mayúscula (y para ser un componente tienen que devolver html)

No entro en detalle en absoluto, pero para que veas lo cerca que estamos ya de React

Objetos

Los objetos están en desuso, aunque en JavaScript (casi) todo es un objeto

Puede parecer contradictorio, no lo es, lo que está en desuso es la programación orientada en objetos en pro de la programación funcional

Vale la pena hacer un repaso breve a la programación orientada a objetos ya que ésta no deja de ser una herramienta que para determinados problemas seguirá siendo la mejor opción

Primero de todo, que casi todo en JavaScript sea un objeto quiere decir que casi todo tiene métodos, es decir funciones que aplican a esos objetos

En un array tendríamos por ejemplo los métodos map() y forEach()

Si queremos generar un método en un objeto, nada más sencillo que definir una función como una propiedad del objeto

Aquí vemos la palabra mágica this que sirve para referenciar al objeto en sí mismo

Y como no, las fat arrows nos simplifican mucho la escritura

Ops, no ha funcionado (!) Esto es porque las fat arrows no tienen objeto this, no nos sirven para acceder a las propiedades de un objeto, pero podemos explicitar el objeto y problema resuelto

Siguiendo con los objetos, estos en programación orientada a objetos tienen más sentido si se incluyen dentro de clases que agruparán objetos con usos similares (es la gracia de la Object Oriented Programming OOP)

Es decir, en lugar de crear objetos directamente, creamos objetos del "tipo" User el cual se inicializa con el método constructor() donde la palabra new es la que implementa this como una referencia del objeto creado

Aquí las fat arrows funcionan como habitualmente, pero podrían ser una mala idea (el utilizarlas aquí) por posibles problemas que podrían aparecer cuando queramos utilizar otras clases para herencias

No creo que haya que profundizar más porque como digo la programación funcional está rompiendo los esquemas de la OOP, aunque sí que vale la pena aprender lo básico para poder leer código ajeno en condiciones

Bonus: el uso de bind

El uso de clases tiene un problema con this y es el siguiente

Es decir, dentro de la función (método) getPeople tenemos que this se ha perdido dentro del forEach()

Esto lo podemos solucionar así (poco elegante)

O podemos arreglarlo con un segundo argumento en forEach

O si utilizamos la función bind()

En este tipo de problemas lo habitual es utilizar bind, porque no todos los métodos son como forEach y aceptan ese segundo argumento

Una manera de evitar el bind es utilizar las fat arrows que nos hacen el bind automáticamente

Esto representa un gran argumento para utilizar fat arrows dentro de las clases, aunque hay cierta controversia sobre si es o no es buena idea (al menos en ciertos casos muy concretos)

Hasta aquí el cuarto capítulo del curso de JavaScript básico, el capítulo más denso de todos y con el que casi terminamos el curso al menos en lo que respecta al conocimiento íntimo del lenguaje, complementando el capítulo anterior

Nos vemos en el quinto capítulo donde terminamos de interiorizar JavaScript, en Capítulo 5: Sobre las referencias

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]