Comment vérifier si un objet est vide en JavaScript ?

Voici un bout de code pour vérifier si un objet est vide ou non. Pour les navigateurs récents, vous pouvez utiliser du JS vanilla et utiliser le nouveau « Object.keys ». Mais pour les navigateurs plus anciens, vous pouvez installer la bibliothèque Lodash et utiliser la méthode « isEmpty ».

const empty = {};

/* -------------------------
  JS Vanilla pour les navigateurs récent
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true

/* -------------------------
  Lodash pour les anciens navigateurs
----------------------------*/
_.isEmpty(empty)
// true

Qu’est-ce que le JavaScript Vanilla ?

JavaScript Vanilla n’est pas un nouveau framework ou une nouvelle bibliothèque. Il s’agit simplement du JavaScript ordinaire, sans l’utilisation d’une bibliothèque comme Lodash ou jQuery.

A. Vérification des objets vides dans les navigateurs les plus récents

Nous pouvons utiliser la fonction intégrée Object.keys pour vérifier si un objet est vide.

const empty = {};

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

Pourquoi avons-nous besoin d’un constructor supplémentaire ?

Vous vous demandez peut-être pourquoi on a besoin de faire empty.constructor. Eh bien, c’est pour couvrir les instances d’objet vide. En JavaScript, nous avons 9 constructeurs intégrés.

new Object();

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

Donc on peut créer un objet vide avec new Object(). Remarque : vous ne devez JAMAIS créer un objet en utilisant le constructeur. C’est considéré comme une mauvaise pratique, voir Guide de style Airbnb et ESLint.

const obj = new Object();

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

Donc juste en utilisant le Object.keys il retourne true lorsque l’objet est vide ✅. Mais que se passe-t-il lorsque nous créons une nouvelle instance d’objet en utilisant ces autres constructeurs.

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 

Ah la la, nous avons un faux positif…

Résolution des faux positifs avec constructor

Corrigeons cela en ajoutant une vérification du constructeur.

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 ✅

Magnifique ! Nous avons corriger notre problème.

Test de la vérification du vide sur d’autres valeurs

Très bien, testons notre méthode sur d’autres valeurs et voyons ce que nous obtenons

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

Ça semble bon pour l’instant, ça renvoie false pour les non-objets.

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

Mais attention ! Ces valeurs entraîneront une erreur.

goodEmptyCheck(undefined);
goodEmptyCheck(null);

Améliorer la vérification du vide pour null et undefined

Si vous ne voulez pas qu’il jette un TypeError vous pouvez ajouter une vérification supplémentaire :

let value;

value // vérification null et undefined
 && Object.keys(value).length === 0 && value.constructor === Object;

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

Parfait, aucune erreur n’est lancée

B. Vérification des objets vides dans les navigateurs plus anciens

Que faire si vous avez besoin de supporter des navigateurs plus anciens ? Eh bien, nous avons deux options. Nous pouvons nous en tenir à la une version vanilla ou utiliser une bibliothèque.

Vérification d’un objet vide avec JavaScript

La méthode classique n’est pas aussi concise. Mais elle fait le travail

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

Elle renvoie true pour les objets.

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

Excellent, il ne se fait pas piéger par nos objets constructeurs.

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 ✅

Et nous sommes couverts pour null et undefined. Il retournera false et ne lancera pas un TypeError.

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

Vérification d’un objet vide avec des bibliothèques externes

Il existe des tonnes de bibliothèques externes que vous pouvez utiliser pour vérifier les objets vides. Et la plupart d’entre elles offrent un excellent support pour les anciens navigateurs.

Lodash

_.isEmpty({});
// true

Underscore

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

Vanilla vs Bibliothèques

La réponse est : ça dépend ! Je suis un grand fan d’aller au plus simple quand c’est possible car je n’aime pas l’overhead d’une bibliothèque externe. De plus, pour les petites applications, je suis trop paresseux pour configurer la bibliothèque externe. Mais si votre application a déjà une bibliothèque externe installée, alors allez-y et utilisez-la. Vous connaissez votre application mieux que quiconque. Choisissez donc ce qui convient le mieux à votre situation.