Pular para o conteúdo

Programando Soluções

Como verificar objeto vazio Javascript, veja 3 formas

  • por
objeto vazio

Introdução

Verificar objeto vazio é uma daquelas situações do dia a dia onde precisamos de uma função útil para fazer isso.

Parece ser algo simples, mas se não se atentar durante o desenvolvimento, uma condição tranquila de fazer pode virar um pesadelo, isso porque você acha que aquilo está certo, e um erro passa desapercebido.

O que não fazer

Há duas formas que parecem que estão certas, porém não retornarão o resultado esperado, são elas a verificação literal, ou somente fazer o objeto === {}.

Pois bem, as duas formas retorna falso, veja o exemplo:

//verificação literal
let obj = {};
if(!obj){
    console.log('objeto vazio');
} else {
    console.log('objeto com valor')
}
objeto vazio 1

Outro exemplo:

//verificação com igualdade
let obj = {};
if (obj === {}) {
  console.log("objeto vazio");
} else {
  console.log("objeto com valor");
}
objeto vazio 2

Importante

Isso acontece porque no Javascript, dois objetos distintos, nunca são iguais, independente de ter as mesmas propriedades, são duas declarações diferentes, e por isso o Javascript interpreta como valores diferentes.

Como verificar se objeto vazio

Existem algumas formas de realizar essa verificação, não há um método certo ou errado, você pode utilizar o que achar melhor.

Verificar se existe propriedade

Uma das formas, é percorrer as propriedades do objeto, utilizando um loop for e a função hasOwnProperty para verificar se existe alguma propriedade, dessa forma:

//verificação com hasOwnProperty
let obj = {};
function objetoVazio(obj) {
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) return false;
  }
  return true;
}
console.log(objetoVazio(obj));
objeto vazio 3

Dessa forma, caso o loop percorra todo o objeto e não encontre nenhuma propriedade, será retornado true, e assim a lógica para verificar se está vazio está pronta.

Caso queira utilizar este método, recomendo colocar em um arquivo com funções úteis em seu sistema, e chamar essa função sempre que precisar, pois colocar essa lógica em muitas partes do seu código, pode deixar ele grande e complexo sem necessidade.

Usando Object.keys

Caso você esteja programando para os navegadores com suporte ao ECMAScript 5, você pode utilizar o método Object.keys.

Este método recebe um objeto como parâmetro, pega os nomes das propriedades e cria um array com todos esses nomes, exemplo:

const object1 = {
  a: 'string1',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// saída: Array ["a", "b", "c"]

Já que esse método transforma as chaves do objeto em array, caso o objeto não tenha nenhuma chave, então ele retornará um array vazio, e para verificar se um array está vazio, poderemos conferir o tamanho dele com o length.

E essa é a sacada, vamos transformar um objeto em array e verificar o seu tamanho, caso seja 0, então significa que o objeto está vazio:

let obj = {};
let objetoVazio = Object.keys(obj).length === 0;
console.log(objetoVazio); //true
objeto vazio 4

Mesmo que seja um método menor, também pode ser bom separá-lo e utilizar quando necessário, assim você terá uma maneira única de verificar objeto vazio no seu sistema.

Transformar em string

Outro método, é transformar esse objeto a ser verificado em uma string, e ai comparar essa string de objeto, com uma string de objeto vazio, dessa forma:

//transformar em string
let obj = {};
function verificarObjetoVazio(obj) {
  return JSON.stringify(obj) === "{}";
}
console.log(verificarObjetoVazio(obj));

O Javascript não consegue comparar objetos, mas consegue strings, então nesse caso, colocar essa string de objeto vazio, transformar o objeto em string e comparar os dois retornará sucesso.

objeto vazio 5

Código fonte

Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox

Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.

Vídeo sobre o assunto

Conclusão

Provavelmente, caso pesquise, você encontrará outras formas de fazer essa verificação, isso porque não há uma forma nativa da linguagem, há bibliotecas como o lodash que traz uma sequência de métodos úteis, e um deles é verificar objeto vazio, mas provavelmente essa biblioteca utiliza alguma dessas lógicas para devolver o resultado. Até o próximo post 🙂

Desenvolvimento Web com HTML, CSS e JavaScript

Aprenda a testar Aplicações Javascript

Referências

https://qastack.com.br/programming/679915/how-do-i-test-for-an-empty-javascript-object

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Trabalhando_com_Objetos

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys#browser_compatibility

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok