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')
}
Outro exemplo:
//verificação com igualdade
let obj = {};
if (obj === {}) {
console.log("objeto vazio");
} else {
console.log("objeto com valor");
}
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));
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
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.
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