Siempre me pongo triste

Me irrita mucho cuando escucho a personas decir que el Frontend es un desorden, especialmente cuando afirman que JavaScript "acepta cualquier cosa" y que se puede escribir de cualquier manera, ya que podemos alcanzar el mismo resultado de diversas formas.

En realidad, no están equivocados. Sí, es posible escribir JavaScript de diferentes maneras y aún así alcanzar el mismo objetivo.

El principal problema es que, al hablar de Frontend y JavaScript, no contamos con patrones de diseño tan definidos como los que se encuentran en el Backend, donde existen frameworks y convenciones ampliamente adoptados. En el caso del Frontend, la información sobre buenas prácticas y patrones está dispersa por la web, lo que resulta en una diversidad de opiniones y visiones. Esta falta de uniformidad dificulta el desarrollo y la comprensión, especialmente para quienes están comenzando. Incluso el autor que habla de esto tiene sus propias opiniones.

El punto que quiero abordar

Al concluir este desahogo, quiero destacar que el hecho de que algo no sea evidente no significa que no exista o que no debas buscar conocimiento para aplicar al menos lo básico de patrones en tu código. En el caso de JavaScript, por ejemplo, existen numerosos sitios que presentan diversas implementaciones y patrones ya establecidos en el lenguaje, listos para ser utilizados en el desarrollo. Solo es necesario dedicar tiempo a leer, y entenderás la finalidad de cada recurso y el momento adecuado para utilizarlo. Ejemplo: Mozilla Docs JS

Veamos un ejemplo de código real

El código a continuación fue extraído de un proyecto real que estaba en producción. Aunque, teóricamente, "no hay nada de malo en él" y funciona normalmente, en la práctica, la implementación podría haberse realizado de una manera diferente, lo que resultaría en mejoras en la legibilidad y el rendimiento.

Vamos a ajustar algunas partes del código para alinearlo mejor con las recomendaciones de la documentación de JavaScript. Esto se debe a que el lenguaje ofrece métodos/funciones específicos para manejar ciertas situaciones de forma más eficiente.

Quiero recordar que aquí abordaremos un concepto básico de JavaScript: trabajar con Arrays y Objetos. El código ha sido diseñado de manera didáctica, evitando complejidades innecesarias.

Entonces, vamos allá. Primero, definiremos un objeto que, teóricamente, sería recibido desde nuestro Backend a través de una API:

const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]

Ahora, por alguna razón inusual y poco convencional, pero solo con fines de ejemplo, necesitamos agregar un nuevo campo llamado "label" a este objeto. El campo "label" debe consistir en el prefijo Opened seguido del nombre de la tienda.

Primero, vamos a analizar una implementación que considero "menos ideal", ya que no utiliza las mejores herramientas, métodos o funciones de JavaScript para agregar el campo "label".

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// resultado:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

Aquí podemos ver que, primero, tenemos un .reduce, luego un .forEach y finalmente un .push. Todo esto se utiliza solo para devolver una nueva lista reconstruida para mostrar en pantalla. Lo que más me molesta aquí es la aparente falta de conocimiento o el no uso de funciones como .flatMap y .map, que son herramientas básicas y fundamentales al trabajar con JavaScript. Además, la sintaxis del código termina siendo confusa y excesivamente verbosa.

Veamos ahora cómo podría haberse hecho:

storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})

¿Qué opinas? ¿Más simple, no?

¿Por qué esto? ¿Por qué así?

Vamos allá. Conceptualmente, el .flatMap "aplasta" nuestro array de objetos en un solo nivel. El resultado sería algo así:

[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]

Ahora, utilizamos el .map, que se utiliza para "remapear" un array, es decir, recorremos cada elemento, agregando la propiedad "label". El resultado se vería así:

[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

Conclusión

¡Esto es realmente genial! JavaScript ofrece todas las herramientas necesarias para escribir código de calidad.

Todo lo que necesitas hacer es estudiarlo y aplicar los conceptos correctamente, no solo codificar por codificar.

Sugerencia de libro:

Author Of article : FoodieHoodie Read full article