Eu Sempre fico pistola

Fico muito irritado quando ouço pessoas dizendo que o Frontend é uma bagunça, especialmente quando afirmam que o JavaScript "aceita qualquer coisa" e que dá para escrever de qualquer jeito, já que podemos alcançar o mesmo resultado de várias maneiras.

Na verdade, elas não estão erradas. Sim, é possível escrever JavaScript de diversas formas e, ainda assim, chegar ao mesmo objetivo.

A principal questão é que, ao falarmos de Frontend e JavaScript, não contamos com padrões de projeto tão bem definidos como os encontrados no Backend, onde há frameworks e convenções amplamente adotados. No caso do Frontend, as informações sobre boas práticas e padrões estão dispersas pela web, resultando em uma diversidade de visões e opiniões. Essa falta de uniformidade dificulta o desenvolvimento e entendimento, principalmente para quem está começando. Inclusive o autor que lhos fala tem as opiniões dele.

O ponto que quero abordar

Ao concluir este desabafo, quero destacar que o fato de algo não ser evidente não significa que ele não exista ou que você não deva buscar conhecimento para aplicar pelo menos o básico de padrões em seu código. No caso do JavaScript, por exemplo, há inúmeros sites que apresentam diversas implementações e padrões já estabelecidos na linguagem, prontos para serem utilizados no desenvolvimento. Basta se dedicar à leitura, e você entenderá a finalidade de cada recurso e o momento adequado para utilizá-lo. Exemplo: Mozilla Docs JS

Vejamos um exemplo de código real

O código abaixo foi extraído de um projeto real que estava sendo executado em produção. Embora, teoricamente, "não haja nada de errado com ele" e ele funcione normalmente, na prática, a abordagem utilizada poderia ser diferente, resultando em melhorias na legibilidade e no desempenho.

Vamos simplesmente ajustar algumas partes do código para torná-lo mais alinhado com as recomendações da documentação do JavaScript. Isso porque a linguagem oferece métodos/funções específicos para lidar com certas situações de forma mais eficiente.

Gostaria de lembrar que aqui abordaremos um conceito bastante básico do JavaScript: trabalhar com Arrays e Objetos. O código foi elaborado de forma didática, evitando complexidades desnecessárias.

Então, vamos lá! Primeiro, definiremos um objeto que, teoricamente, seria recebido do nosso Backend via API:

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

Agora, por algum motivo inusitado e pouco convencional, mas apenas para fins de exemplo, precisamos adicionar um novo campo chamado "label" a este objeto. O campo "label" deve ser composto pelo prefixo Opened seguido pelo nome da loja.

Primeiramente, vamos analisar uma implementação que considero "menos ideal", pois não utiliza as melhores ferramentas, métodos ou funções do JavaScript para realizar essa adição do 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"
    }
]

Aqui podemos observar que, primeiramente, temos um .reduce, seguido de um .forEach e, por fim, um .push. Tudo isso é utilizado apenas para retornar uma nova lista reconstruída para exibição na tela. O que mais me incomoda aqui é a aparente falta de conhecimento ou o não uso de funções como .flatMap e .map, que são recursos básicos e importantes ao trabalhar com JavaScript. Além disso, a sintaxe do código acaba ficando confusa e excessivamente verbosa.

Vejamos agora como poderia ter sido feito:

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

Então, o que achou? Mais simples não?
Por que isso? Por que assim?

Vamos lá! Conceitualmente, o .flatMap, "achata" nosso array de objetos em um único nível. O resultado será algo assim:

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

Agora, utilizamos o .map, que serve para "remapear" um array, ou seja, percorremos item por item, adicionando a propriedade "label". O resultado fica assim:

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

Conclusão

Isso é realmente incrível! O JavaScript oferece todas as ferramentas necessárias para escrever um código de qualidade.

Tudo o que você precisa fazer é estudá-lo e aplicar os conceitos corretamente, e não apenas codificar por codificar.

Dica de Livro:

Author Of article : FoodieHoodie Read full article