Leeres Objekt in JavaScript prüfen: Object.keys und Lodash

Hier ist ein kurzes Snippet, mit dem du prüfst, ob ein Objekt leer ist. In aktuellen Browsern reicht dir Vanilla JS mit dem neuen „Object.keys“. Für ältere Browser installierst du die Bibliothek Lodash und nutzt die Methode „isEmpty“.

const empty = {};

/* -------------------------
  Vanilla JS für aktuelle Browser
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true

/* -------------------------
  Lodash für ältere Browser
----------------------------*/
_.isEmpty(empty)
// true

Was ist Vanilla JavaScript?

Vanilla JavaScript ist kein neues Framework und keine neue Bibliothek. Es ist schlicht ganz normales JavaScript, ohne Helfer wie Lodash oder jQuery.

A. Leere Objekte in aktuellen Browsern prüfen

Mit der eingebauten Funktion Object.keys prüfst du, ob ein Objekt leer ist.

const empty = {};

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

Warum brauchen wir zusätzlich constructor?

Vielleicht fragst du dich, wozu empty.constructor gut sein soll. Damit fangen wir leere Objektinstanzen ab. JavaScript kennt 9 eingebaute Konstruktoren.

new Object();

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

Ein leeres Objekt lässt sich also mit new Object() erzeugen. Hinweis: Lege ein Objekt NIEMALS über den Konstruktor an. Das gilt als schlechte Praxis, siehe Airbnb Style Guide und ESLint.

const obj = new Object();

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

Allein mit Object.keys kommt also true zurück, wenn das Objekt leer ist ✅. Aber was passiert, wenn wir eine neue Objektinstanz über einen dieser anderen Konstruktoren anlegen?

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 

Autsch, ein falsch positives Ergebnis…

False Positives mit constructor ausräumen

Das lösen wir mit einer zusätzlichen Prüfung des Konstruktors.

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 ✅

Sehr schön, das Problem ist behoben.

Die Leerprüfung mit anderen Werten testen

Testen wir unsere Methode mit anderen Werten und sehen wir uns an, was dabei herauskommt.

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

Sieht bisher gut aus: Für alles, was kein Objekt ist, kommt false zurück.

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

Aber Vorsicht: Diese Werte lösen einen Fehler aus.

goodEmptyCheck(undefined);
goodEmptyCheck(null);

Leerprüfung für null und undefined verbessern

Wenn kein TypeError fliegen soll, ergänzt du eine weitere Prüfung:

let value;

value // Prüfung auf null und undefined
 && Object.keys(value).length === 0 && value.constructor === Object;

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

Perfekt, jetzt wird kein Fehler mehr geworfen.

B. Leere Objekte in älteren Browsern prüfen

Und wenn du ältere Browser unterstützen musst? Dann hast du zwei Möglichkeiten: bei einer Vanilla-Variante bleiben oder eine Bibliothek einsetzen.

Leeres Objekt mit purem JavaScript prüfen

Die klassische Variante ist weniger kompakt, erledigt den Job aber zuverlässig.

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

Für Objekte liefert sie true.

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

Sehr gut, sie fällt nicht auf unsere Konstruktor-Objekte herein.

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 ✅

Und null sowie undefined sind abgedeckt: Es kommt false zurück, ohne dass ein TypeError fliegt.

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

Leeres Objekt mit externen Bibliotheken prüfen

Es gibt jede Menge externe Bibliotheken, mit denen du auf leere Objekte prüfen kannst. Und die meisten davon unterstützen ältere Browser hervorragend.

Lodash

_.isEmpty({});
// true

Underscore

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

Vanilla vs. Bibliotheken

Die Antwort lautet: Es kommt darauf an. Ich halte die Dinge gern so einfach wie möglich, weil ich den Overhead einer externen Bibliothek nicht mag. Bei kleinen Anwendungen bin ich außerdem zu faul, sie überhaupt einzurichten. Nutzt deine Anwendung aber ohnehin schon eine passende Bibliothek, dann greif ruhig darauf zurück. Du kennst deine Anwendung besser als jeder andere und entscheidest, was zu deiner Situation passt.