Como excluir elemento de array em JavaScript

Neste artigo você vai aprender a como excluir elemento de array em JS, utilizando algumas diferentes abordagens

Fala programador(a), beleza? Bora aprender mais sobre arrays em JS!

Temos algumas opções para remover elementos de um array em JavaScript:

• pop: remove elemento do fim;
• shift: remove elemento do começo;
• splice: remove um determinado elemento;

Basta então escolher o método mais indicado para a sua situação

Vou apresentar alguns trechos de código utilizando todos eles:

const list1 = [1, 2, 3, 4, 5]

list1.pop()

console.log(list1) // [1, 2, 3, 4]

const list2 = [1, 2, 3, 4, 5]

list2.shift()

console.log(list2) // [2, 3, 4, 5]

const list3 = [1, 2, 3, 4, 5]

list3.splice(2, 1)

console.log(list3) // [1, 2, 4, 5]

Observe que todos eles manipulam a lista original, ou seja, removem o elemento diretamente

E todos os métodos retornam, na sua execução, o elemento removido

Que em alguns casos pode ser útil

No método splice temos uma característica diferente dos outros, este recebe parâmetros

O primeiro é o índice que desejamos começar a remoção, todos os arrays começam com índice 0, então o 2 que utilizamos corresponde ao número 3 da lista

E o segundo é a quantidade de elementos que queremos remover da lista

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Conclusão

No artigo de hoje você aprendeu a como excluir elemento de array em JavaScript

Utilizamos três alternativas: pop, shift e splice

Com algum destes métodos você vai conseguir resolver a sua demanda! 🙂

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Como remover um elemento pelo valor, e não pelo índice?

Essa é a situação mais comum do dia a dia: você não sabe a posição, você sabe o conteúdo

Aí o caminho é achar o índice primeiro com indexOf e só depois chamar o splice

const indice = frutas.indexOf('banana')

if (indice !== -1) {
frutas.splice(indice, 1)
}

Tome cuidado com esse if aí em cima!

Quando o valor não existe na lista, o indexOf devolve -1

E splice com -1 remove o ÚLTIMO item, ou seja, você apaga a coisa errada e nem percebe

Já me ferrei uma vez por causa disso 🙂

Como remover sem alterar o array original?

pop, shift e splice mexem na lista original, como mostrei lá em cima

Só que boa parte do código que a gente escreve hoje não pode fazer isso

Se você trabalha com estado em React, Vue ou coisa parecida, mutar a lista original costuma dar dor de cabeça

Nesses casos a jogada é gerar uma lista NOVA já sem o item

const semOTres = numeros.filter(n => n !== 3)

Repare que numeros continua intacto

O filter não remove nada de fato, ele monta outro array só com o que passou no teste

E se você quiser tirar por posição sem mutar, dá pra combinar slice com o spread:

const indice = 2

Mesma remoção, zero efeito colateral

Removendo item de um array de objetos:

Na prática é lista de usuários, de produtos, de tarefas

O filter resolve isso numa linha, comparando pelo id:

const tarefas = [
{ id: 1, titulo: 'estudar array' },
{ id: 2, titulo: 'tomar café' },
{ id: 3, titulo: 'gravar vídeo' }
]

const restantes = tarefas.filter(tarefa => tarefa.id !== 2)

console.log(restantes) // fica só o id 1 e o id 3

Se você precisar mutar a lista original mesmo assim, dá pra achar a posição com findIndex e cair no splice de novo:

const posicao = tarefas.findIndex(tarefa => tarefa.id === 2)

if (posicao !== -1) {
tarefas.splice(posicao, 1)
}

Posso usar delete pra remover um item do array?

Pode, mas provavelmente não é isso que você quer

O delete apaga o VALOR e deixa o buraco no lugar, o tamanho da lista não muda

console.log(lista.length) // continua 5, com uma posição vazia no meio

Esse buraco costuma aparecer depois em forma de undefined no meio de um map ou de um for

Então pra tirar item de array de verdade: splice quando pode mutar, filter quando não pode

O que cada método devolve:

Detalhe que pega muita gente de surpresa

pop e shift devolvem o elemento que saiu

splice devolve um ARRAY com o que foi removido, mesmo quando você tira um item só

filter e slice devolvem um array novo e não encostam no original

const removidos = lista.splice(2, 1)

Ou seja, se você escrever const item = lista.splice(1, 1) esperando o valor puro, vai receber uma lista com ele dentro

Faça o teste no console pra fixar!

Qual método escolher em cada situação?

Um resuminho pra você não travar na hora:

remover o último item: pop

remover o primeiro item: shift

remover por posição, alterando a lista original: splice

remover por valor, alterando a lista original: indexOf + splice

remover sem mexer no original (React, estado, funções puras): filter

remover por condição ou dentro de lista de objetos: filter

Beleza? Escolhe pelo efeito colateral que você aceita ter, não pelo nome mais bonito 😀

Como remover um elemento pelo valor, e não pelo índice?

Essa é a situação mais comum do dia a dia: você não sabe a posição, você sabe o conteúdo

Aí o caminho é achar o índice primeiro com indexOf e só depois chamar o splice

const indice = frutas.indexOf('banana')

if (indice !== -1) {
frutas.splice(indice, 1)
}

Tome cuidado com esse if aí em cima!

Quando o valor não existe na lista, o indexOf devolve -1

E splice com -1 remove o ÚLTIMO item, ou seja, você apaga a coisa errada e nem percebe

Já me ferrei uma vez por causa disso 🙂

Como remover sem alterar o array original?

pop, shift e splice mexem na lista original, como mostrei lá em cima

Só que boa parte do código que a gente escreve hoje não pode fazer isso

Se você trabalha com estado em React, Vue ou coisa parecida, mutar a lista original costuma dar dor de cabeça

Nesses casos a jogada é gerar uma lista NOVA já sem o item

const semOTres = numeros.filter(n => n !== 3)

Repare que numeros continua intacto

O filter não remove nada de fato, ele monta outro array só com o que passou no teste

E se você quiser tirar por posição sem mutar, dá pra combinar slice com o spread:

const indice = 2

Mesma remoção, zero efeito colateral

Removendo item de um array de objetos:

Na prática é lista de usuários, de produtos, de tarefas

O filter resolve isso numa linha, comparando pelo id:

const tarefas = [
{ id: 1, titulo: 'estudar array' },
{ id: 2, titulo: 'tomar café' },
{ id: 3, titulo: 'gravar vídeo' }
]

const restantes = tarefas.filter(tarefa => tarefa.id !== 2)

console.log(restantes) // fica só o id 1 e o id 3

Se você precisar mutar a lista original mesmo assim, dá pra achar a posição com findIndex e cair no splice de novo:

const posicao = tarefas.findIndex(tarefa => tarefa.id === 2)

if (posicao !== -1) {
tarefas.splice(posicao, 1)
}

Posso usar delete pra remover um item do array?

Pode, mas provavelmente não é isso que você quer

O delete apaga o VALOR e deixa o buraco no lugar, o tamanho da lista não muda

console.log(lista.length) // continua 5, com uma posição vazia no meio

Esse buraco costuma aparecer depois em forma de undefined no meio de um map ou de um for

Então pra tirar item de array de verdade: splice quando pode mutar, filter quando não pode

O que cada método devolve:

Detalhe que pega muita gente de surpresa

pop e shift devolvem o elemento que saiu

splice devolve um ARRAY com o que foi removido, mesmo quando você tira um item só

filter e slice devolvem um array novo e não encostam no original

const removidos = lista.splice(2, 1)

Ou seja, se você escrever const item = lista.splice(1, 1) esperando o valor puro, vai receber uma lista com ele dentro

Faça o teste no console pra fixar!

Qual método escolher em cada situação?

Um resuminho pra você não travar na hora:

remover o último item: pop

remover o primeiro item: shift

remover por posição, alterando a lista original: splice

remover por valor, alterando a lista original: indexOf + splice

remover sem mexer no original (React, estado, funções puras): filter

remover por condição ou dentro de lista de objetos: filter

Beleza? Escolhe pelo efeito colateral que você aceita ter, não pelo nome mais bonito 😀