Here’s a Code Recipe to check if an object is empty or not. For newer browsers, you can use plain vanilla JS and use the new “Object.keys” 🍦 But for older browser support, you can install the Lodash library and use their “isEmpty” method 🤖

const empty = {};

/* -------------------------
  Plain JS for Newer Browser
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true

/* -------------------------
  Lodash for Older Browser
----------------------------*/
_.isEmpty(empty)
// true

What is Vanilla JavaScript

Vanilla JavaScript is not a new framework or library. It’s just regular, plain JavaScript without the use of a library like Lodash or jQuery.

A. Empty Object Check in Newer Browsers

We can use the built-in Object.keys method to check for an empty object.

const empty = {};

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

Why do we need an additional constructor check?

You may be wondering why do we need the constructor check. Well, it’s to cover for the wrapper instances. In JavaScript, we have 9 built-in constructors.

new Object();

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

So we can create an empty object with new Object(). Side note: you should NEVER create an object using the constructor. It’s considered bad practice, see Airbnb Style Guide

and ESLint

const obj = new Object();

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

So just using the Object.keys, it does return true when the object is empty ✅. But what happens when we create a new object instance using these other constructors.

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 ya ya, we have a false positive 😱

Solving false positive with constructor check

Let’s correct this by adding a constructor check.

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

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 ✅

Beautiful! We have covered our edge case 👍

Testing empty check on other values

Alright, let’s test our method on some values and see what we get 🧪

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

Looks good so far, it returns false for non-objects.

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

🚨But watch out! These values will throw an error.

// TypeError: Cannot covert undefined or null ot object
goodEmptyCheck(undefined)
goodEmptyCheck(null)

Improve empty check for null and undefined

If you don’t want it to throw a TypeError, you can add an extra check:

let value;

value // 👈 null and undefined check
 && Object.keys(value).length === 0 && value.constructor === Object;

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

Perfect, no error is thrown 😁

#javascript #developer