Pare de abusar do .map()!

Tradução de "Stop abusing .map()!"

De vez em quando, quando faço revisão de código ou visito o StackOverflow, encontro trechos de código semelhantes a este:

Como você pode ver, é apenas uma iteração simples onde, para cada elemento do fruitIds array, adicionamos active classes a um determinado elemento HTML em um DOM.

Muitos programadores (especialmente os novos) não notaram nada de errado com o código acima. No entanto, há um grande problema aqui, o uso de .map(). Deixe-me explicar.

O que há de errado no .map()?

Bem, não há nada de errado com esse método de array específico. Na verdade, acho que é muito útil e envolve um dos padrões de interação, o mapeamento.

Em palavras simples, o mapeamento é uma operação que aplica uma função a cada elemento de uma coleção e retorna uma nova coleção com elementos alterados pela função mencionada. Por exemplo, se temos uma matriz de números const nums = [1, 2, 3, 4]; e gostaríamos de receber uma nova matriz de números duplicados, poderíamos mapear a matriz original para uma nova como esta (em JavaScript):

A biggerNums matriz consistiria em números da nums matriz original multiplicados por 2.

Observe como o .map() é usado, atribuímos o resultado deste método a uma nova variável chamada biggerNums. Também mencionei anteriormente que o mapeamento é uma operação que retorna uma nova coleção de elementos. E esta é a razão pela qual o trecho de código mostrado no início deste artigo está errado. O .map() retorna um novo array - sempre - e se não precisarmos desse array, não devemos usar .map() em primeiro lugar. Neste caso particular (iteração simples), um método de array diferente deve ser usado .forEach() - que é projetado especificamente para tais casos. Ele não retorna uma nova coleção, ele simplesmente percorre uma matriz e invoca uma função de retorno de chamada para cada elemento, permitindo que você faça algo para cada um deles.

Portanto, a versão correta do snippet mencionado deve ser assim:

Não precisamos de um novo array, então simplesmente iteramos sobre o fruitIds array e adicionamos a active classe a um elemento HTML para cada um dos itens do array.

Ok, mas por que eu deveria me importar? .map() é mais curto e mais fácil de escrever do que .forEach(). O que poderia dar errado?

Consequências do abuso do .map()

Uma das piores consequências do abuso do .map() é o fato de ele retornar uma nova matriz redundante. Para ser mais específico, ele retorna um novo array do mesmo tamanho daquele em que este método foi chamado. Isso significa que se tivermos um array de 1000 elementos, .map() retornará um novo array de 1000 elementos, todas às vezes.

Em JavaScript, todas as funções retornam um valor. Mesmo se não usarmos a palavra chave return, a função retornará undefined implicitamente. É assim que a linguagem foi projetada. Esta regra também se aplica a callbacks, eles também são funções.

Dito isso, vamos voltar ao exemplo original:

O que acontece aqui? Uma matriz que IDs de frutas é criada e, em seguida, mapeada para outra matriz do mesmo tamanho. Mesmo que a matriz retornada por .map() nõa seja usada, ela ocorre na memória. Esta nova matriz (não utilizada) tem a seguinte aparência:

É porque o callback passado para o .map() não possui a palavra chave return e como sabemos, se não houver return, undefined é retornado implicitamente.

É muito ruim? Muito mal. Neste exemplo específico, isso não trará consequências sérias, há apenas 3 itens no array, portanto, criar outro array de três elementos não causará problemas. No entanto, o problema surge quando lidamos com grandes matrizes de dados complexos. Se quisermos iterar em um array de cinco mil objetos e abusarmos do .map(), criamos outro array de cinco mil elementos undefineds. Assim, acabamos armazenando 10.000 elementos na memória, dos quais metade é redundante. É uma prática muito inadequada e, em alguns cenários, pode até levar à sobrecarga do aplicativo. É por isso que devemos escolher os métodos certos para as tarefas certas.

Resumo

Existem muitas práticas que são essencialmente ruins, mas as consequências negativas começarão a ser visíveis apenas a lidar com conjuntos de dados maiores. Uma dessas práticas é abuso do .map(). Ao operar em matrizes pequenas, não causará nenhum dano. Mas quando cometemos esse erro com um array maior, ele começa a sobrecarregar nosso aplicativo e pode ser muito difícil de depurar.

É por isso que nunca devemos deixar passar e sempre que vemos esse abuso, devemos cuidar disso. Espero que agora você entenda o porquê.

Texto original: https://dev.to/catchmareck/stop-abusing-map-51mj