Quando se quer retirar um item de um array em JavaScript, existem várias formas de se chegar nesse resultado e podemos ficar perdidos em qual delas usar. Três deles que se confundem são: splice , slice e filter.

Embora possamos chegar a resultados semelhantes com eles, devemos sempre utilizar as coisas para aquilo que elas foram feitas. Nesse artigo, vamos estudá-los tendo isso em mente.

Sobre cada método

filter - Utilizado para retirar itens de um array, preservando o original, baseado em uma condição

splice - Utilizado para retirar itens de um array, modificando o original, baseado nos indexes

slice - Utilizado para criar um novo array, contendo X itens do original, baseado nos indexes

Utilizando os métodos

Consideremos o array abaixo para estudar o comportamento de cada um dos métodos

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]

console.log(personagens.length)
// 3

filter

array.filter((element, index, array) => retorno)

// element é o elemento atual que o método está verificando
// index é o index do elemento atual
// array é o próprio array - pouco utilizado
// retorno é o retorno da função, que deve ser true ou false

O filter é um método que deve ser utilizado quando queremos preservar o array original, tendo uma cópia deste porém apliado um filtro que deixe apenas os itens que queremos.

O filter verifica cada item de um array e aplica uma condição, retornando true para manter o elemento, false caso contrário. O retorno final do método é uma cópia do array com a condição do filtro aplicado.

Esse método não altera o array original.

Por exemplo, vamos filtrar o array, pegando apenas os personagens com idade abaixo de 100 anos.

Para isso, devemos aplicar uma condição dentro do filter que retorne true ou false para cada elemento que estiver verificando.
Nossa condição deve ser: idade < 100.

Todos os elementos que retornarem true para essa condição, serão incluídos no novo array que será criado. Todos os que retornarem false, não serão incluídos.

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]

const personagensAbaixoDe100Anos = personagens.filter((personagem) => personagem.idade < 100)

console.log(personagens)
// [{ nome: 'Frodo'... }, { nome: 'Gandalf'... }, { nome: 'Aragorn'...}]

console.log(personagensAbaixoDe100Anos)
// [{ nome: 'Frodo'... }, { nome: 'Aragorn'...}]

Podemos observar que, após aplicar o filtro, o array original permanece intacto, por isso a necessidade de atribuir o .filter a uma nova variável.

splice

array.splice(index, deleteCount, elemento1, elemento2, elementoN)

// index é a partir de qual item que queremos alterar o array
// deleteCount é a partir do index, quantos itens queremos alterar
// elemento1... elementoN são itens que podemos adicionar no lugar dos que estão sendo removidos

O splice deve ser utilizado quando queremos retirar itens de um array, modifiando o array original.

A sintaxe do splice pode assustar um pouco, mas vamos analisá-la com calma.

O splice remove um item de um array, a partir do index informado, contando a quantidade de itens em deleteCount. Opcionalmente, pode-se também inserir N novos itens, mostrados na sintaxe como elemento1, elemento2, elementoN. Vale ressaltar que é pouco comum inserir novos itens dessa forma em um array. O retorno do método é um array com os itens que foram removidos.

Muito cuidado ao usar o splice, pois ele altera o array original.

Diferente do filter, não podemos aplicar uma condição para remover os itens, mas sim, devemos passar um específico. Caso ainda não saibamos o index, podemos encontrá-lo com findIndex.

Vejamos alguns exemplos:

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]

const removidos = personagens.splice(1, 1)
// a partir do index 1, remova 1 item

console.log(personagens)
// [{ nome: 'Frodo'... }, { nome: 'Aragorn'...}]

console.log(removidos)
// [{ nome: 'Gandalf'... }]

Agora, encontrando o index antes de realizar o splice:

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]

const index = personagens.findIndex(personagem => personagem.nome === 'Gandalf')
const removidos = personagens.splice(index, 1)
// a partir do index encontrado, remova 1 item, ou seja, só o item encontrado

console.log(personagens)
// [{ nome: 'Frodo'... }, { nome: 'Aragorn'...}]

console.log(removidos)
// [{ nome: 'Gandalf'... }]

Removendo mais de um item:

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]

const removidos = personagens.splice(1, 2)
// a partir do index 1, remova 2 itens

console.log(personagens)
// [{ nome: 'Frodo'... }]

console.log(removidos)
// [{ nome: 'Gandalf'... }, { nome: 'Aragorn'...}]

Removendo um item e adicionando outros ao mesmo tempo:

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]

const removidos = personagens.splice(1, 2, { nome: "Sam", idade: 21 })
// a partir do index 1, remova 2 itens e adicione um novo

console.log(personagens)
// [{ nome: 'Frodo'... }, { nome: "Sam"... }]

console.log(removidos)
// [{ nome: 'Gandalf'... }, { nome: 'Aragorn'...}]

Mais uma vez, ressalto a importância de tomar cuidado ao realizar operações que alterem o array original, uma vez que não será possível retorná-lo ao seu estado original.

Caso seja realmente essa a intenção é claro não temos problema. Porém, podemos antes criar uma cópia para trabalharmos em cima dessa cópia caso necessário:

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
]
const personagensCopia = [...personagens]

const removidos = personagensCopia.splice(1, 2, { nome: "Sam", idade: 21 })
// a partir do index 1, remova 2 itens e adicione um novo

console.log(personagens)
// [{ nome: 'Frodo'... }, { nome: 'Gandalf'... }, { nome: 'Aragorn'...}]

console.log(personagensCopia)
// [{ nome: 'Frodo'... }, { nome: "Sam"... }]

console.log(removidos)
// [{ nome: 'Gandalf'... }, { nome: 'Aragorn'...}]

slice

arr.slice(indexInicial, indexFinal)

// indexInicial é o início do novo array que queremos
// indexFinal é o final do novo array que queremos. O item no indexFinal não será incluído

O slice deve ser utilizado quando queremos pegar partes de um array, sem modificar o array original.

O slice recebe dois indexes e retorna o sub array encontrado.

Por exemplo, supondo que temos uma lista com cem itens, podemos querer exibir apenas os dez primeiros. Pra isso podemos utilizar o slice.

const personagens = [
    { nome: 'Frodo', idade: 33 },
    { nome: 'Gandalf', idade: 13000 },
    { nome: 'Aragorn', idade: 87 },
    // ... imagine 100 personagens ao todo
]

const primeiros10Personagens = personagens.slice(0, 10)
// como o index final não é incluído, teremos 10 itens, ou seja, do index 0 ao 9

Resumo

Após estudar cada exemplo, espero ter explicado a utilização de cada um desses métodos e qual o cenário ideal para cada um.

Acompanhe nosso blog para mais conteúdos de Front-End.

Siga também nosso canal do YouTube