¿Cómo comprobar si un objeto está vacío en JavaScript?

Aquí tienes un fragmento de código para comprobar si un objeto está vacío. En los navegadores recientes te basta con JavaScript vanilla y el moderno « Object.keys ». Para los navegadores antiguos, instala la biblioteca Lodash y usa el método « isEmpty ».

const empty = {};

/* -------------------------
  Vanilla JS para navegadores recientes
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true

/* -------------------------
  Lodash para navegadores antiguos
----------------------------*/
_.isEmpty(empty)
// true

¿Qué es JavaScript Vanilla?

JavaScript Vanilla no es un framework nuevo ni una biblioteca nueva. Es simplemente JavaScript a secas, sin recurrir a una biblioteca como Lodash o jQuery.

A. Comprobar un objeto vacío en los navegadores recientes

Podemos usar la función nativa Object.keys para comprobar si un objeto está vacío.

const empty = {};

Object.keys(empty).length === 0 && empty.constructor === Object;

¿Por qué hace falta comprobar además el constructor?

Quizá te preguntes por qué necesitamos añadir empty.constructor. Pues para cubrir las instancias de objeto vacías. En JavaScript existen 9 constructores nativos.

new Object();

new String();
new Number();
new Boolean();
new Array();
new RegExp();
new Function();
new Date();

Así que podemos crear un objeto vacío con new Object(). Ojo: NUNCA deberías crear un objeto mediante el constructor. Se considera una mala práctica, tal y como explican la guía de estilo de Airbnb y ESLint.

const obj = new Object();

Object.keys(obj).length === 0; // true

Con solo Object.keys obtenemos true cuando el objeto está vacío ✅. Pero ¿qué ocurre si creamos una nueva instancia de objeto con esos otros constructores?

function badEmptyCheck(value) {
  return Object.keys(value).length === 0;
}

badEmptyCheck(new String());    // true 
badEmptyCheck(new Number());    // true 
badEmptyCheck(new Boolean());   // true 
badEmptyCheck(new Array());     // true 
badEmptyCheck(new RegExp());    // true 
badEmptyCheck(new Function());  // true 
badEmptyCheck(new Date());      // true 

Vaya, tenemos un falso positivo…

Resolver el falso positivo con constructor

Vamos a arreglarlo añadiendo una comprobación del constructor.

function goodEmptyCheck(value) {
  Object.keys(value).length === 0
    && value.constructor === Object; // constructor
}

goodEmptyCheck(new String());   // false ✅
goodEmptyCheck(new Number());   // false ✅
goodEmptyCheck(new Boolean());  // false ✅
goodEmptyCheck(new Array());    // false ✅
goodEmptyCheck(new RegExp());   // false ✅
goodEmptyCheck(new Function()); // false ✅
goodEmptyCheck(new Date());     // false ✅

¡Perfecto! Problema resuelto.

Probar la comprobación con otros valores

Muy bien, probemos nuestro método con otros valores y veamos qué obtenemos.

function isEmptyObject(value) {
  return Object.keys(value).length === 0 && value.constructor === Object;
}

De momento pinta bien: devuelve false para lo que no es un objeto.

isEmptyObject(100)  // false
isEmptyObject(true) // false
isEmptyObject([])   // false

¡Pero cuidado! Estos valores provocan un error.

goodEmptyCheck(undefined);
goodEmptyCheck(null);

Mejorar la comprobación para null y undefined

Si prefieres que no lance un TypeError, añade una comprobación más:

let value;

value // comprobación de null y undefined
 && Object.keys(value).length === 0 && value.constructor === Object;

value = null;       // null
value = undefined;  // undefined

Listo, ya no se lanza ningún error.

B. Comprobar un objeto vacío en los navegadores antiguos

¿Y si necesitas dar soporte a navegadores antiguos? Tenemos dos opciones: quedarnos en vanilla o tirar de una biblioteca.

Comprobar un objeto vacío con JavaScript

La forma clásica no es tan concisa, pero cumple su función.

function isObjectEmpty(value) {
  return (
    Object.prototype.toString.call(value) === '[object Object]' &&
    JSON.stringify(value) === '{}'
  );
}

Devuelve true para los objetos.

isObjectEmpty({});           // true ✅
isObjectEmpty(new Object()); // true ✅

Estupendo: no se deja engañar por nuestros objetos creados con constructores.

isObjectEmpty(new String());   // false ✅
isObjectEmpty(new Number());   // false ✅
isObjectEmpty(new Boolean());  // false ✅
isObjectEmpty(new Array());    // false ✅
isObjectEmpty(new RegExp());   // false ✅
isObjectEmpty(new Function()); // false ✅
isObjectEmpty(new Date());     // false ✅

Y también cubrimos null y undefined. Devuelve false en lugar de lanzar un TypeError.

isObjectEmpty(null);      // false
isObjectEmpty(undefined); // false

Comprobar un objeto vacío con bibliotecas externas

Hay montones de bibliotecas externas para comprobar objetos vacíos, y la mayoría ofrece un soporte excelente para los navegadores antiguos.

Lodash

_.isEmpty({});
// true

Underscore

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

Vanilla frente a bibliotecas

La respuesta es: depende. Soy muy partidario de ir a lo sencillo siempre que se pueda, porque no me gusta el coste añadido de una biblioteca externa. Además, en aplicaciones pequeñas me da pereza configurarla. Pero si tu aplicación ya tiene una biblioteca externa instalada, adelante, úsala. Nadie conoce tu aplicación mejor que tú: elige lo que mejor le convenga.