Проверить является ли объект пустым – одна из постоянно встречающихся задач в повседневной жизни Javascript разработчика.

Например, работая над очередной фичей в React приложении, требовалось делать активной кнопку “Подтвердить” только в том случае, когда объект const order = {} содержал свойства, то есть не был пустым.

В случае если бы переменная order содержала массив, то все было бы просто:

1const order = [];
2const emptyOrder = !order.length;
3// true
4
5<button disabled={emptyOrder}>Подтвердить</button>;

Рассмотрим 4 метода объектов js, которые помогут проверить объект на пустоту.

1. Object.keys()

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

1const order = {};
2const emptyOrder = !Object.keys(order).length;
3// true

Тоже самое можно записать так:

1const emptyOrder = Object.keys(order).length === 0;
2// true

Далее прописываем переменную для свойства disabled нашей кнопки (делаем ее неактивной):

1<button disabled={emptyOrder}>Подтвердить</button>

2. JSON.stringify()

Второй способ проверить объект на пустоту - использовать метод JSON.stringify(), чтобы перевести наш объект в строчный формат и сравнить результат со строкой '{}'.

1const order = {};
2const emptyOrder = JSON.stringify(order) === '{}';
3// true

Добавляем наше условие:

1<button disabled={emptyOrder}>Подтвердить</button>

3. Цикл for..in

Данный способ интересен тем, что его поддерживают более старые версии браузеров. Ознакомиться с текущим состоянием браузерной совместимости цикла for..in можно здесь ).

Давайте создадим функцию, которая принимает на вход объект и использует цикл for..in, чтобы пробежаться по ключам объекта. Далее используем метод object.hasOwnProperty() для проверки наличия ключа.

Функция возвращает true, в случае если ключи отсутствуют. Мы получим значение false, если в объекте присутствует хотя бы один ключ.

1const order = {};
2
3function isEmptyObj(object) {
4  for (let key in object) {
5    if (object.hasOwnProperty(key)) {
6      return false;
7    }
8  }
9  return true;
10}
11
12console.log(isEmptyObj(order));
13// true

4. isEmpty (метод в библиотеке Lodash)

В библиотеке Lodash есть специальный метод, который принимает на вход как массивы так и объекты:

1_.isEmpty([1, 2, 3]);
2// false
3_.isEmpty({ a: 1 });
4// false