Erros comuns com arrays Javascript e alguns métodos para usar no dia a dia

Existem muitos métodos de Javascript, para resolver quase todo tipo de problema mas ainda sim frequentemente nos deparamos com "workarounds" (vulgo gambiarra) por desconhecimento de alguns desse métodos

Alguns casos que já me deparei

1. "if" dentro de um "map" para buscar um usuário

   // Como não buscar um elemento em um array
   const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
   
   const user = users.map(user => {
   if (user === 'Jean') {
       return user
   }
   })[0]
   
   console.log(user)
   

   Problemas:
   1. Uso inadequado do método map, ele deve ser usado para criar um array modificado baseado na iteração de um array original
   2. A busca vai falhar se você tentar buscar um usuário que não seja o primeiro (Se não acredita faz o teste aí)

2. O "if" dentro do "map" para remover um elemento do array

   const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
   
   // Como não remover um item de um array
   const user = users.map(user => {
   if (user !== 'Joãozinho') {
       return user
   }
   })
   
   console.log(user)
   

   Problemas:
   1. Mesmo problema do caso anterior
   2. O array vai ficar um valor undefined na posição do item que foi removido
   [ 'Jean', undefined, 'Deschamps', 'Junior' ]

3. Usar "forEach" ou "loop for" para criar uma cópia modificada do array

   const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
   
   const modifiedUsers = []
   
   users.forEach(user => {
       modifiedUsers.push('Dev ' + user)
   })
   
   console.log(modifiedUsers)
   

   Problemas:
   1. Existe um método nativo que faz isso de uma forma mais simples
   2. Esse código em projetos maiores poderia ficar bem mais complexo

Refatorando o primeiro caso

O primeiro caso poderia ser reescrito com o método find que é adequado para fazer buscas em um array e retornar o objeto

const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']

const user = users.find(user => user === 'Joãozinho')

console.log(user)

// Joãozinho

Também existe um similar que é o método findIndex que também faz uma busca, mas retorna a posição do elemento no array

const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']

const userIndex = users.findIndex(user => user === 'Joãozinho')

console.log(userIndex)

// 1

Refatorando o segundo caso

O segundo caso pode ser refatorado com o método filter que é o métdo adequado para filtrar (remover) itens de um array

const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']

const user = users.filter(user => user !== 'Deschamps')

console.log(user)

// [ 'Jean', 'Joãozinho', 'Junior' ]

Refatorando o terceiro caso

O terceiro caso poderia ser usado utilizando o próprio método map

const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']

const modifiedUsers = users.map(user => 'Dev ' + user)

console.log(modifiedUsers)

// ["Dev Jean", "Dev Joãozinho", "Dev Deschamps", "Dev Junior"]

Conhecendo mais alguns métodos que podem ser uma mão na roda

• Para adicionar items a um array

  • Método push adiciona um elemento ao final do array

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    users.push('Diego')
    console.log(users)
    
    // [ 'Jean', 'Joãozinho', 'Deschamps', 'Junior', 'Diego' ]
    

  • Método unshift adiciona um elemento no início do array

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    users.unshift('Diego')
    console.log(users)
    
    // [ 'Diego', 'Jean', 'Joãozinho', 'Deschamps', 'Junior' ]
    

  • É possível usar o método splice para adcionar um elemento em uma posição específica do array

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    // Adicionar Diego na posição 2
    users.splice(2, 0, 'Diego')
    console.log(users)
    
    // [ 'Jean', 'Joãozinho', 'Diego', 'Deschamps', 'Junior' ]
    

• Para remover um item do array

  • Método pop remove um elemento do final do array

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    users.pop()
    console.log(users)
    
    // [ 'Jean', 'Joãozinho', 'Deschamps' ]
    

  • Método shift remove um elemento do início do array

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    users.shift()
    console.log(users)
    
    // [ 'Joãozinho', 'Deschamps', 'Junior' ]
    

  • É possível usar o método splice para remover item da posição 2 do array (splice é um coringa)

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    // Remove o item na posição 2
    users.splice(2, 1)
    console.log(users)
    
    // [ 'Jean', 'Joãozinho', 'Junior' ]
    

• Para substituir um item de um array

  • Você pode usar o método splice para substituir um item de um array

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    // Substituir o item na posição 2 por "Diego"
    users.splice(2, 1, 'Diego')
    console.log(users)
    
    // [ 'Jean', 'Joãozinho', 'Diego', 'Junior' ]
    

• Para verificar um array

  • Método some é usado para verificar se um algum item do array satisfaz uma condição

    const users = ['Jean', 'Joãozinho', 'Deschamps', 'Junior']
    // Verificar se o item "Deschamps" está no array users
    const existsUser = users.some(user => user === 'Jean')
    console.log(existsUser)
    

    Nesse caso é que é um array de strings poderia ser usado uma função mais simples como users.includes('Deschamps'), o some é para ser usado em arrays de objetos

Concluindo

Existem muitos outros métodos de array em Javascript, mas esses exemplos já resolvem boa parte dos problemas.

O pulo do gato é: Sempre que você estiver fazendo alguma implementação "estranha" para manipular um Array procure saber se não existe um método nativo que já resolve o seu problema.