Remover propriedade de objeto JavaScript

Neste artigo você vai aprender a remover propriedade de objeto JavaScript, ou seja, deletar a propriedade de um objeto de forma nativa em JS

A partir dessa linha a propriedade deixa de existir no objeto

O delete retorna true em praticamente todos os casos, inclusive quando a propriedade nem existia, e retorna false apenas quando a propriedade é própria e não configurável, fora do modo estrito

Em modo estrito, esse mesmo caso lança TypeError

Dois avisos que valem ouro: o delete só age em propriedades próprias (se houver uma de mesmo nome no protótipo, o objeto passa a usar a do protótipo) e, em arrays, ele não altera o length e deixa um espaço vazio, então pra array o certo é splice()

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre objetos e suas propriedades em JavaScript

Para deletar ou remover propriedades de objetos em JavaScript temos a instrução delete

Podemos utilizar ela em conjunto com a propriedade e a mesma será removida

Veja um código com exemplo prático:

var obj = {
  nome: "Matheus",
  idade: 29
}
delete obj.nome;
console.log(obj); // { idade: 29 }

Perceba que o objeto é inicializado com duas propriedades: nome e idade

Depois executamos o operador de delete na propriedade nome do objeto que é referenciado pela variável obj

E então quando exibimos seu conteúdo com console.log, apenas a propriedade idade é encontrada

Pois a propriedade nome foi removida após a interpretação da instrução delete, legal né?

Desta maneira podemos deletar qualquer chave dos nossos objetos, independente se os mesmos se encontrem dentro de arrays, por exemplo

Você deve apenas utilizar delete com o nome da chave! =)

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

Neste artigo vimos como remover propriedade de objeto JavaScript

Apenas precisamos utilizar a instrução de delete em uma das propriedades do objeto alvo

Após esta instrução a propriedade não constará mais no objeto

Apenas tome cuidado que alguns objetos não permitem a edição de suas propriedades, neste caso elas também não poderão ser deletadas

Geralmente objetos que são criados pela própria linguagem possuem esta restrição

Nestes casos a melhor abordagem seria fazer uma validação, caso a propriedade fosse utilizada ou partir para outra opção

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

O que o delete retorna?

O delete devolve true em praticamente todo caso

Inclusive quando a propriedade nem existia no objeto: ele não faz nada e ainda assim retorna true

O único caso de false é quando a propriedade é própria e não configurável, e mesmo assim só fora do modo estrito

var obj = { nome: "Matheus" }

console.log(delete obj.nome)      // true
console.log(delete obj.sobrenome) // true, mesmo sem existir

Em modo estrito a história muda: tentar deletar uma propriedade própria não configurável lança TypeError, em vez de retornar false

Ou seja, se tu escreve com "use strict", o erro estoura na tua cara em vez de passar batido, o que é bom =)

delete em array: cuidado com o buraco

Aqui mora a pegadinha clássica

Usar delete em um elemento de array NÃO altera a propriedade length, e ainda deixa um espaço vazio (empty slot) na posição

console.log(arr.length) // 3

Isso vale até quando tu deleta o último elemento: o length continua o mesmo

A própria documentação do operador dá o caminho certo: se o objetivo é remover o elemento alterando o conteúdo do array, usa splice()

E se o elemento deve continuar existindo, só que sem valor, atribui undefined pra ele

arr.splice(1, 1)   // remove de verdade

Tome cuidado com isso, array esparso é o tipo de coisa que passa no console e quebra no forEach depois…

A propriedade continua aparecendo depois do delete?

Se isso aconteceu, provavelmente ela não é do teu objeto

O delete só age sobre propriedades próprias (own properties)

Quando existe uma propriedade de mesmo nome na cadeia de protótipos, o objeto simplesmente passa a usar a versão do protótipo depois da remoção

Parece que o delete não funcionou, mas funcionou: tu removeu a de cima e apareceu a de baixo

Pra sumir de vez, o delete tem que ser feito no próprio protótipo

É tipo tirar o papel de cima da pilha e achar que a mesa ficou vazia, sendo que tinha outro papel embaixo

Como remover uma propriedade sem alterar o objeto original?

O delete é destrutivo, ele mexe no objeto que tu passou

Se tu trabalha com React, Redux, state imutável e por aí vai, o caminho é outro: desestruturação com rest

const obj = { nome: "Matheus", idade: 29, cidade: "Pelotas" }

const { nome, ...rest } = obj

console.log(rest) // { idade: 29, cidade: "Pelotas" }
console.log(obj)  // segue intacto

A desestruturação com rest copia pra um novo objeto todas as propriedades próprias enumeráveis que não foram capturadas no padrão

Ou seja: tu "remove" o nome sem tocar no original

As propriedades rest e spread de objeto entraram no ECMAScript 2018, publicado em junho de 2018, então é sintaxe bem estabelecida hoje

E fora do objeto comum: Reflect e Map

Tem duas formas que valem conhecer

O Reflect.deleteProperty() é o equivalente do operador delete em forma de função

Reflect.deleteProperty(obj, "nome")

Ele está classificado como Baseline Widely available e roda nos navegadores desde setembro de 2016, então tu pode usar sem medo

Útil quando tu precisa passar a remoção como função, dentro de um map, de um proxy, essas coisas

Já se o teu dado está em um Map, o método é o delete dele mesmo:

map.delete("chave")

Ele retorna true se a entrada foi removida e false se a chave não foi encontrada

Map está nos navegadores desde julho de 2015 e também é Baseline Widely available

delete deixa o código mais lento?

Essa é boa, e a resposta honesta é: pode deixar

No V8, o motor do Chrome e do Node, objetos que sofrem remoção de propriedades podem passar a usar o chamado modo dicionário (slow properties)

Nesse modo os inline caches não funcionam e o acesso às propriedades fica mais lento que nas fast properties

Não é motivo pra nunca usar delete, beleza?

É motivo pra pensar duas vezes antes de sair deletando propriedade dentro de laço quente ou em objeto que é lido milhares de vezes

Nesses casos, gerar um objeto novo com rest costuma ser a escolha mais tranquila

Erros comuns com o delete

Dois tropeços clássicos

O primeiro: usar delete em uma variável

var x = 10
delete x

Aplicar o delete a um nome não qualificado é erro de sintaxe em modo estrito

Caso este erro apareça: SyntaxError: applying the ‘delete’ operator to an unqualified name is deprecated

O delete é pra propriedade de objeto, não pra variável

O segundo: tentar deletar propriedade que a linguagem protege

O Math.PI é o exemplo perfeito, os atributos dele são não gravável, não enumerável e não configurável

delete Math.PI // não remove nada

A regra por trás é essa: propriedade própria não configurável não sai com delete, ponto

Esse post nasceu junto com a aula 21 da playlist de JavaScript aqui do canal, e o cenário do vídeo é bem o do dia a dia

Montei um mini projeto do zero: um index.html só de casca, um arquivo .js linkado nele e nada mais, sem nenhum controle de HTML, JavaScript puro mesmo

Criei o objeto com as propriedades nome e idade, abri com o Live Server e joguei dois console.log: um antes do delete e um depois

O de antes mostra o objeto completo, o de depois mostra o objeto sem a chave que eu removi

É o teste mais bobo do mundo e é justamente por isso que ele ensina: tu vê a propriedade sumir na tua frente, no console, sem framework nenhum no meio

Faça o teste aí também, leva dois minutos =)

O que ainda quero medir com calma em vídeo é o efeito do modo dicionário do V8 em objeto que sofre delete repetido, comparando com a criação de um objeto novo via rest, porque isso só fica honesto com medição na mão