Translated and polished by Wu Liu, the original address is written by Samantha Ming

Here is a code snippet that checks if the object is empty. For newer browsers, you can use regular JS and ES6 syntax object.keys. However, to support older browsers, you can install Lodash and use its isEmpty method.

const empty = {};
/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- in a new browser, ordinary JS -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
Object.keys(empty).length === 0 && empty.constructor === Object
// true
/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- for older browsers lodash grammar -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /
_.isEmpty(empty)
// true
Copy the code

1 What is Vanilla JavaScript?

Vanilla was not a new framework or library. It means regular JavaScript, without using libraries like Lodash or JQuery.

2 Check for empty objects in the new browser

We can check an empty Object using the built-in object.keys method:

const empty = {};
Object.keys(empty).length === 0 && empty.constructor === Object;
Copy the code

2.1 Why do we need an additional constructor check?

You may be wondering why we need to check the constructor. Because, this is an example for checking the packages that cover it. In JavaScript, we have nine built-in constructors.

new Object(a);new String(a);new Number(a);new Boolean(a);new Array(a);new RegExp(a);new Function(a);new Date(a);Copy the code

Therefore, we can use new Object() to create an empty Object. Note ⚠️ : you should not use this constructor to create an object. This is considered bad practice and can be explained in the Airbnb Style Guide and ESLint.

const obj = new Object(a);Object.keys(obj).length === 0; // true
Copy the code

Keys does return true when the Object is empty, though. 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 😱
Copy the code

As you can see, here we get an abnormal result 😱.

Check the constructor to avoid abnormal results

We need to correct the above example by adding constructor checks.

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 ✅
Copy the code

Beautiful! We cover these edge examples 👍

2.3 Test null object methods with other values

Next, test our method with some other values and see what this returns 🧪

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

So far it looks good, it will return false for objects that are not

isEmptyObject(100)  // false
isEmptyObject(true) // false
isEmptyObject([])   // false
Copy the code

🚨 But be careful! The following values will throw exceptions.

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

2.4 For NULL and undefined, improved method of checking empty objects

If you don’t want it to throw TypeError exceptions, 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
Copy the code

Perfect, already can’t throw error 😁

3 Check for empty objects in the old browser

What if you need to support older browsers? Who the hell am I kidding?! We all know that when we say old browsers, we mean Internet Explorer 😂. At this point, we had two choices, we could choose plain (Vanilla) JavaScript or use the library.

3.1 Check for empty objects using plain JavaScript

The way to use plain JavaScript is not that neat. But it did work 👍.

function isObjectEmpty(value) {
  return Object.prototype.toString.call(value) === "[object Object]" && JSON.stringify(value) === "{}"
}
Copy the code

It returns true for objects.

isObjectEmpty({});           / / true ✅
isObjectEmpty(new Object()); / / true ✅
Copy the code

Fortunately, it is not fooled by our constructor 😉

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 ✅
Copy the code

And when we pass null or undefined, it will not raise TypeError.

isObjectEmpty(null);      // false
isObjectEmpty(undefined); // false
Copy the code

3.2 Use external libraries to check for empty objects

There are many external libraries that can be used to check for empty objects. Also, most of them have good support for older browsers 👍

Lodash

_.isEmpty({});
// true
Copy the code

Underscore

_.isEmpty({});
// true
Copy the code

jQuery

jQuery.isEmptyObject({});
// true
Copy the code

4. Compare common JavaScript and libraries

The answer depends! I’m a big fan of using plain JavaScript as much as possible because I don’t like the overhead of external libraries. Also, for small applications, I’m too lazy to install extra libraries. However, if your application already has an external library installed, you can continue to use it. Because you know your application better than anyone else. So, choose the one that best suits your situation 👍

❤️ Love triple punch

Writing is not easy, please give a thumbs-up if you can, it will become my motivation to keep writing!!

I am Wu Liu, like innovation, tamping source Code, focus on Vue3 source Code, Vite source Code, front-end engineering and other technology sharing, welcome to pay attention to my wechat public number: Code Center.