Как проверить объект на пустоту в JavaScript

В новых браузерах можно спокойно использовать метод Object.keys(), чтобы проверить объект на пустоту в JavaScript. А для поддержки старых — установить библиотеку Lodash и применить встроенный в нее метод isEmpty.

const empty = {};
 
// Проверка для новых версий браузеров 
Object.keys(empty).length === 0 && empty.constructor === Object // true 

// Проверка для старых версий браузеров и 
IE _.isEmpty(empty) // true

Проверка объектов на пустоту в JavaScript в новых браузерах

Для ванильного js достаточно использовать новый метод Object.keys().

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

Для чего необходима дополнительная проверка конструктора? В JavaScript имеется девять встроенных конструкторов.

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

Мы можем создать пустой объект с помощью new Object(), но стоит отметить, что:

Никогда не следует создавать объект с помощью конструктора. Это считается плохой практикой.

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

При обычном использовании Object.keys() он возвращает true, если объект пуст. Но что происходит, когда мы создаем новый экземпляр объекта с помощью других вышеуказанных конструкторов.

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

Такая попытка проверить объект на пустоту в js выдает ложное срабатывание true.

Решение проблемы ложных срабатываний

Это можно легко исправить, добавив проверку конструктора.

function goodEmptyCheck(value) {      
     Object.keys(value).length === 0 && value.constructor === Object; // Проверка конструктора 
} 

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

Отлично! Теперь мы получили верный ответ.

Как проверить объект на пустоту в JavaScript при других значениях

Давайте протестируем этот метод с некоторыми другими значениями.

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

Пока все выглядит хорошо. Для не объектов такой код возвращает false.

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

Но с таким подходом следует быть осторожным! Такие значения вызовут ошибку.

Проверка объекта на null и undefined

Чтобы избежать ошибки TypeError можно применить дополнительную проверку.

let value; 
value && Object.keys(value).length === 0 && value.constructor === Object; 

// Проверка на null и undefined 
value = null; // null 
value = undefined; // undefined

В этом случае никаких ошибок возникать не будет.

Как проверить объект на пустоту в JavaScript для старых версий браузеров

Для поддержки старых браузеров и Internet Explorer существует два варианта на выбор: использовать нативный js или библиотеки. Простой «ванильный» способ выглядит не очень лаконичным, но работает хорошо.

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

Он возвращает true для объектов.

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

И объектам-конструкторам его тоже не обмануть.

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

Он также отлично обрабатывает объекты при null и undefined, возвращая false и не выдавая TypeError.

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

Использование сторонних библиотек

Существует множество внешних библиотек, которые позволяют проверить объект на пустоту в js. Большинство из них обеспечивают отличную поддержку IE и старых версий браузеров.

Lodash

_.isEmpty({}); // true

Underscore

_.isEmpty({}); // true

jQuery

jQuery.isEmptyObject({}); // true

Чистый JavaScript или библиотеки

Что именно выбрать, зависит от обстоятельств. Я отдаю предпочтение «ванильному» js и стараюсь использовать его всегда. Подключение внешних библиотек не всегда оправдано и негативно сказывается на скорости загрузки сайтов и их работе. Да и изучать документацию и настраивать библиотеку для таких мелочей особого смысла тоже нет. Но если разрабатываемое приложении уже предполагает использование сторонних библиотек, то почему бы не задействовать их. В любом случае окончательный выбор того, как в JavaScript проверить объект на пустоту зависит от личных предпочтений каждого и конкретной задачи.

Прочие методы проверки

for (let key in object) {      
     if (object.hasOwnProperty(key)) {        
          return false;     
     } 
     return true;
}